0

テーブルに削除ボタンがあり、ボタンのクリックイベントリスナーにjqueryがあります。ここにコードがあります

$(".delbtn").click(function () { 
    var count = 0;
    var $row = jQuery(this).closest('tr'); 
    var $columns = $row.find('td'); 

    var values = ""; 

    jQuery.each($columns, function(i, item) { 
        if( count == 0 ){delFund = item.innerHTML}
        if( count == 1) {delOrg  = item.innerHTML}
        if( count == 2) {stat = item.innerHTML }    
        count++
    }); 

//the below lines of codes would display how to show values on a browser like 
// firefox or chrome.
//console.log(delFund, delOrg);


    $(this).closest("tr").fadeTo(500, 0, function () {  
        $(this).remove(); 
    }); 


//update the item on the database table for deletion.
  $.ajax({type: "POST",
          url: "dbfunctions.jsp",  
          data: {TYPE:'D', fundval: delFund, orgval: delOrg, tuidval:tuid, status:stat }}).done(function( msg )
          {  
            //alert(msg);
          });

});

これはすべて正常に機能します。私の問題は、データベースにクエリを実行し、それを使用してこのデータで html テーブルを更新し、テーブルの最後の行に新しいボタンを追加することです。しかし、ボタンをクリックしても反応しません。イベントリスナーがアタッチされていないためだと思います。私の質問は、以前のすべてのボタンに既に追加したイベントリスナーも動的に生成された新しいボタンにアタッチされるように、ボタンを更新するにはどうすればよいですか?

これは、テーブルの最後に項目を追加する方法のコード スニペットです。

$("#thisTable > tbody").append( 
                                        "<tr><td>"+thisfund.value+"</td>"+
                                        "<td>"+thisorg.value+"</td>"+
                                        "<td>"+'PENDING ACCESS'+"</td>" +
                                        "<td>"+"<a class='delbtn' href='#'>X</a>"+"</td></tr>");
        thisfund.value = "";// set the input boxes back to null
            thisorg.value  = "";

          });
4

3 に答える 3

3

.delbtn のクリック イベントはライブ イベントではなく、新しく追加された要素には適用されません。

使用している JQuery のバージョンに応じて、次のいずれかを使用してライブ イベントを追加できます。

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+
于 2012-06-27T02:06:49.577 に答える
2

この男を試してみてください：

API: http://api.jquery.com/on/

.on() メソッドは、jQuery オブジェクトで現在選択されている要素のセットにイベント ハンドラーをアタッチします。

events 引数には、任意のイベント名を使用できます。jQuery は、ブラウザーの標準の JavaScript イベント タイプを通過し、クリックなどのユーザー アクションによってブラウザーがイベントを生成すると、ハンドラー関数を呼び出します。

あなたの場合class='delbtn'、.onイベントを伴う新しい tr がそれを引き継ぎますが。

お役に立てれば、

コード

$(document).on('click','.delbtn',function () { 
    var count = 0;
    var $row = jQuery(this).closest('tr'); 
    var $columns = $row.find('td'); 

    var values = ""; 

    jQuery.each($columns, function(i, item) { 
        if( count == 0 ){delFund = item.innerHTML}
        if( count == 1) {delOrg  = item.innerHTML}
        if( count == 2) {stat = item.innerHTML }    
        count++
    });
于 2012-06-27T02:02:31.553 に答える
0

これを試して

$(newButton).bind('click',function(){...})
于 2012-06-27T02:03:29.457 に答える