jQuery のデリゲート メソッドが Ajax リクエスト バインディング イベントを失わずに実装する方法の詳細な説明

クリック イベントを要素にバインドした後、問題が発生しました。いくつかの Ajax リクエストを実行してこのページを再度呼び出すと、内部のクリック イベントが無効になりました

例: 私のページングは​​ Ajax リクエストですが、次のページをクリックすると、生成された要素にはクリック イベントが発生しなくなります

自分でプロジェクトを実行するときに発生する問題:

目的: チェックボックス を一括で削除し、クリックしたときに使用をトリガーします。 jqueryを削除するには、onclickイベントをボタンにバインドして、すべてのチェックボックスの値を取得します。

1.初めてsmartyを元にページを呼び出す際に直接注入する場合は問題ありません。条件（Ajax実装）、ページ列を再度呼び出します 記録時にクリックイベントが失敗します

理由：ajaxのコンテンツの読み込みは$(document).ready()の後の操作です。関数をバインドするときに、見つかった要素のセットには、ajax によってロードされたコンテンツも含まれていないため、元のものには問題がなく、後でロードされたものはバインドされません

最終的な解決策:

1。 . jQueryのdelegate()メソッドを使用します

2. ネイティブjsは、チェックボックスの値を送信検証関数

に書き込みます。 、値は隠しフィールド値に割り当てられます

値がない場合は、

<form method="post" action="channel_code_manage.php?act=removeall" name="listForm" id="deleted" class="fn-mt20" onsubmit="
return
 checkbox();">

解決策:

1を返します。 jquery の delegate(sel,[type],[data],fn) メソッドを使用します

live() メソッドは非推奨になりました

$(document).delegate('a', 'click', function() { () }) バインディング イベントを解決します。 Ajax リクエストは

を無効にしません。 指定された要素 (選択された要素の 子要素 に属します) は 1 つ以上の

イベント ハンドラー

ルーチンを追加し、これらのイベントが発生したときに実行する関数を指定します。 。 delegate() メソッドを使用するイベント ハンドラーは、現在または将来の要素 (スクリプトによって作成された新しい要素など) に適用されます。

パラメータ:

selector: イベントをトリガーするfilter

要素の

セレクター文字列。 type:要素に関連付けられた 1 つ以上のイベント。スペースで区切られた複数のイベント値。有効なイベントである必要があります。

data:関数に渡される追加データ

fn:イベント発生時に実行される関数

function checkbox() {
       var compatibility = "",input = document.getElementsByTagName("input"),value;
       for (var i = 0; i < input.length; i++) {
           if (input[i].type == "checkbox") {
               if (input[i].checked) {
                   value = input[i].value;
                   if(value!=&#39;on&#39;){   　　　　　　　　　　　　　　　　给全选按钮value设置为on  排除此选项
                       compatibility += value + ","; 　　　　　　　　　　拼接字符串
                   }}

}
       }
       compatibility = compatibility.substring(0,compatibility.lastIndexOf(","));  //删除最后的，

 

if(!compatibility){　　//如果字符串为空 ，返回false
           alert(&#39;请选择要删除的记录&#39;);
           return false;
       }else{
           document.getElementById(&#39;getvalues&#39;).value=compatibility;   //如果字符串不为空 把值赋值给隐藏于提交
           confirm(&#39;确定批量删除？&#39;);
       }

 

}

問題は完璧に解決されます、笑!

拡張機能:

古いバージョンの jQuery では、ページ上で ajax によってロードされたページ コンテンツの特定のフラグメントのイベントに応答する必要がある場合、ライブ関数を使用してそのイベントに応答できます。例: $('a ').live('click', function() { blah() });jQuery の新しいバージョンでは、live 関数は非推奨になりました。

の関数を実装する方法。新しいバージョンの live 関数は? つまり、ページ フラグメントが ajax 経由で読み込まれるとき、このページ フラグメントのコンテンツは関連イベントにどのように応答するのでしょうか?

いくつかの方法がありますが、この記事では 2 つの簡単な方法のみを説明します:

1 つは、パフォーマンスを最適化せずに、ライブ関数を使用できるように jquery-maigrate を直接インポートする方法です。

• もう1つは、デリゲート関数を使用してライブ関数を実装する方法です

• $(function(){
  $('#deleted').delegate("button",'click',function(){  被选元素的子元素---->deleted为form 表单 button为表单中的按钮              
  checked = [];            
  $('input:checkbox:checked').each(function() {                
  checked.push($(this).val());            
  });            
  $('#getvalues').val(checked);  //给隐藏域设置属性        
  })
  })

  以上がjQuery のデリゲート メソッドが Ajax リクエスト バインディング イベントを失わずに実装する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。