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 サイトの他の関連記事に注目してください。

推奨読書:

DOMドキュメントツリーをトラバースする方法とは何ですか

携帯電話データを同期してインターフェース関数に表示するために反応する

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