JS を使用してバインディングを動的にロードする方法

今回は、JSを使用してバインディングを動的にロードする方法と、JSを使用してバインディングを動的にロードする方法の注意点について説明します。以下は実際的なケースです。

前書き

データを追加するときに、動的読み込みを使用してインターフェイスに表示しましたが、後で私が作成したこのメモを例として挙げます。次に削除をクリックすると、以下に示すように、削除するかどうかを確認するメッセージが表示されます:

ただし、3 つ以上のデータを追加すると、どの項目を削除しても、削除を確認するメッセージが数回表示されます。

調査の結果、ついに問題が見つかりました。

Text

コンテンツが動的に追加される場合、通常、追加された p で使用する必要があるイベント (クリック イベント/変更イベントなど) が書き込まれます。私の削除イベントを例に挙げると、削除イベントはメモの追加イベントの下に記述する必要があるため、最初のデータが追加されたときに 1 回バインドされ、2 番目のデータが追加されたときに 1 回バインドされます。 、n 番目のデータが追加されると、1 回バインドされ、n 回の削除イベントがバインドされているため、n 番目のデータを削除するときに、削除を確認するプロンプトが n 回表示されます。

エラーの原因が判明したので、削除イベントをバインドする前に、最後にバインドされたイベントのバインドを解除するだけです。

コード:

//解绑
$(".deletebtn").off("click");
$(".update").off("change");
//绑定
$(".deletebtn").bind('click', delete_click);
$(".update").bind('change', change_fonts);

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Angularの親子コンポーネントが相互に呼び出します

webpackでdevとprdを操作する方法

以上がJS を使用してバインディングを動的にロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。