jsのイベント監視はcssのイベント監視とは異なりますが、cssのスタイルさえ設定していれば、既存のものでも新規に追加したものでも同じパフォーマンスになります。ただし、イベント リスニングの場合はそうではありません。イベントを各要素に個別にバインドする必要があります。
一般的な例は、テーブルを処理する場合です。各行の末尾に削除ボタンがあります。これをクリックすると、この行が削除されます。
tbody>
この行には元々
| |
;/button>
通常、次のようにバインドします
コードをコピー
}); });
domready より前に存在した削除ボタンではすべてが完璧に機能します。ただし、js を使用して domready の後に数行を動的に追加すると、新しく追加された行のボタンは効果を失います。
この問題を解決するにはどうすればよいですか?以下に 4 つの解決策を示します。
解決策 0 - onclick メソッド
構造と動作の分離の原則を無視する場合、通常はこれを実行します。
このときのdeltr関数はグローバル関数にする必要があり、jQuery(function($) {})の外に置くとローカル関数になってしまい、htmlのonclickが呼び出せなくなるので注意してください。
コードをコピー
コードは次のとおりです:
削除 | jQuery(function($){ //行を追加
$("#table2>tbody").append('
| 新しい行 | |
')
});
});
//行を削除する関数は domready 関数の外側に配置する必要があります
function deltr(delbtn){
$(delbtn).parents("tr").remove();
解決策 1 - バインディングを繰り返す式
は、domready が配置されているときにイベント ハンドラーを既存の要素にバインドし、
し、新しく追加された要素が追加されたときに再度バインドします。
コードをコピー
コードは次のとおりです:
| jQuery(function($){ //削除ボタン イベント バインディングを定義します//コンタミネーションを防ぐために内部に記述しますグローバル名前空間
function deltr(){ $(this).parents("tr").remove();
}; // をバインドするために初期化された削除ボタンがすでにあります。 delete イベント
$( "#table3 .del").click(deltr);
//行を追加
$("#add3").click(function(){
$('
|
')
//ここを削除します。
.find(".del").click(deltr).end()
.appendTo($("#table3>tbody")); >});
});
解決策 2 - イベント バブリング法
このボタンの要素 イベント ハンドラー関数をバインドします。
次に、event.target オブジェクトを使用して、このイベントが探しているオブジェクトによってトリガーされたかどうかを判断します。
通常、event.target.className、event.target.tagName などのいくつかの DOM 属性を使用して判断できます。
コードをコピー
コードは次のとおりです:
| 削除 | jQuery(function($){
//4 番目の削除テーブルのボタン イベント バインディング
$("#table4").click(function(e) {
if (e.target.className=="del"){
$(e. target) .parents("tr").remove();
}
});
// 4 番目のテーブルのボタン イベント バインディングを追加します
$("#add4") .click(function) (){
$("#table4>tbody").append('
| 新しい行を追加 | |
jQuery(function($){
//6 番目のテーブルのボタン イベント バインディングを削除
$("#tbody6 .del" ).click(function() {
$(this).parents(".repeat").remove();
});
// 6 番目のテーブルのボタン イベント バインディングを追加します
$("#add6") .click(function(){
$("#tbody6>.template")
//イベント
.clone(true)
/ / テンプレート タグを削除します
。 RemoveClass("template")
//内部要素を変更します
.find(".content")
.text("New line")
.end ()
//テーブルを挿入
.appendTo($("#tbody6"))
})
});
同様に、この js は次の HTML 構造にも適用されます
