jqueryの新しい要素のイベントバインディングの問題 solution_jquery

jsのイベント監視はcssのイベント監視とは異なりますが、cssのスタイルさえ設定していれば、既存のものでも新規に追加したものでも同じパフォーマンスになります。ただし、イベント リスニングの場合はそうではありません。イベントを各要素に個別にバインドする必要があります。

一般的な例は、テーブルを処理する場合です。各行の末尾に削除ボタンがあります。これをクリックすると、この行が削除されます。

コードをコピー コードは次のとおりです。

tbody>


;/button>



通常、次のようにバインドします



コードをコピー

コードは次のとおりです。 jQuery( function($){ //削除イベントをバインドするために初期化された削除ボタンがすでにあります $(".del").click(function() { $(this).parents(" tr").remove();

});

});


domready より前に存在した削除ボタンではすべてが完璧に機能します。ただし、js を使用して domready の後に数行を動的に追加すると、新しく追加された行のボタンは効果を失います。

この問題を解決するにはどうすればよいですか?以下に 4 つの解決策を示します。

解決策 0 - onclick メソッド


構造と動作の分離の原則を無視する場合、通常はこれを実行します。
このときのdeltr関数はグローバル関数にする必要があり、jQuery(function($) {})の外に置くとローカル関数になってしまい、htmlのonclickが呼び出せなくなるので注意してください。


コードをコピー

コードは次のとおりです:

jQuery(function($){ //行を追加$("#add2").click( 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($){
//5 番目のテーブルのボタン イベント バインディングを削除
$("#table5 .del").click(function() {
$(this) .parents("tr ").remove();
});
//5 番目のテーブルのボタン イベント バインディングを追加
$("#add5").click(function(){
$("# table5>tbody>tr:eq(0)")
//イベントと一緒にコピー
.clone(true)
//テンプレートタグを削除
.removeClass( "template")
//内部要素を変更します
.find("td:eq(0)")
.text("New row")
.end()
/ /テーブルの挿入
.appendTo($("#table5>tbody"))
})
});
全体的なコメント:

上記の 4 つのオプションには、それぞれ長所と短所があります。
計画 No. 0、構造と動作の間に分離がなく、グローバル名前空間を汚染します。最も推奨されない。だから計画とも思っていないんです。ただし、js 初心者にとっては、緊急プロジェクトに使用できます。
オプション 1、非常に満足ですが、良い点も悪い点もありません。
オプション 2、この方法は、JS イベント バブリングの利点を最大限に活用しています。そして最も効率的です。しかし同時に、このソリューションは jQuery の強力なセレクターを無視するため、関連する要素の属性要件が多すぎるとさらに問題が発生します。あなたは、多くの if 条件の正しい関係と間違った関係の間をさまようことになります。後で、jQuery で $(event.target).is(selector) を条件として使用できることを思い出しました。これにより、開発効率は大幅に向上しますが、実行効率はわずかに低下します。
計画 No. 3、これは構造と行動の分離のアイデアを最もよく体現していると思う計画です。ただし、jQuery への依存度が高すぎるという欠点もあります。そうでない場合は、イベントを一緒にコピーする関数を作成する必要がありますが、これは明らかに初心者にとっては非常に困難です。ただし、将来の傾向の観点から、このソリューションは依然として強く推奨されます。

どのプランを選択するかについて明確な数字はありません。それはあなたのプロジェクト、js の習熟度、構造と動作の分離の考え方によって異なります。最適なものが最適です。

追加:

プラン 3 を完全な構造と動作の分離スタイルに変換します。
まず、with template はテンプレート要素です。すべてのコピーのソースです。誤って削除されないようにするため、非表示に設定されています。ライトを削除しない場合、このテンプレート要素もオプションです。既存の要素をコピーしてループできるためです。
次に、繰り返される各要素に繰り返しを追加して、削除ボタンがこのレベルの要素を見つけやすくします。これはオプションですが、必須ではない場合もあります。
最後に、変更する各要素にクラスを追加して、find を使用して見つけられるようにします。たとえば、ここにコンテンツ クラスがあり、新しく追加されたクラスは内部の値を変更できます。
これで、構造と動作を完全に分離するケースが完成しました。

コードをコピー コードは次のとおりです。

;td class="content">この行には元々







>

この行には元々	削除
削除
新しい行
	削除
削除
新しい行を追加	削除 No. 3 解決策 - イベント メソッドをコピーします。 上記の解決策は、jQuery ライブラリを使用しない場合でも、比較的簡単に実装できると言えます。ただし、このソリューションは jQuery に大きく依存しています。また、jQuery バージョン 1.2 以降が必要です。 jQuery の以前のバージョンにはプラグインが必要です。 上記の 2 つのソリューションは両方とも、削除機能について十分に検討し、さまざまなトリガーおよびバインド方法を変更しました。このソリューションは異なります。通常の純粋な静的要素と同様に、準備完了時にバインドできます。ただし、新しい行を追加するときは、上記のように文字列を結合して新しい行を追加する必要はなくなりました。今回はDOM要素をコピーしてみます。そしてコピーする場合はバインドされたイベントごとコピーし、コピー後findなどを使って内部要素を修正します。 同時に、この例のように、すべての要素を削除する場合はテンプレートが必要です。削除しない場合は、テンプレートを使用する必要はありません。誤って削除しないように、ここではテンプレートを非表示にしました。 jQuery で一意の clone(true) を使用しました コードをコピーします コードは次のとおりです: .template{display:none;}	これがテンプレートです	削除
この行には元々	削除
テンプレートは次のとおりです
削除
この行には元々	削除

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 構造にも適用されます

コードをコピーします

コードは次のとおりです:

テンプレートは次のとおりです
削除

>この行には元々
削除

この行には元々
削除