jQuery反復/ループスルーデータテーブルクリックボタン

Question

データベースから結果をレンダリングするテーブルがあります。 Beacause結果は、私はいくつかのアクション（すなわち「編集」/「パブリッシュ」/など）を可能にするボタンがあり、マークアップテーブル内の各列について

<table> 
<thead> 
</thead> 
    <tbody> 
     <td>some datas inside TDs</td> 
     <td>Last TD<button class = 'btn-action-edit'></button></td> 
    </tbody> 
    <tbody> 
     <td>some datas inside TDs</td> 
     <td>Last TD<button class = 'btn-action-edit'></button></td> 
    </tbody> 
    <tbody> 
     <td>some datas inside TDs</td> 
     <td>Last TD<button class = 'btn-action-edit'></button></td> 
    </tbody> 
<tfooter> 
</tfooter> 
</table> 

を与える、「マトリックス」です。 ボタンをクリックすると、何かアクションをしたいです。

：

$('tbody:nth-child(2) .btn-action-edit').on('click', function() { 
    $('tbody:nth-child(2) .detail-edit').toggleClass('open'); 
}); 
$('tbody:nth-child(2) .close-edit').on('click', function() { 
    $('tbody:nth-child(2) .detail-edit').toggleClass('open'); 
}); 

$('tbody:nth-child(3) .btn-action-edit').on('click', function() { 
    $('tbody:nth-child(3) .detail-edit').toggleClass('open'); 
}); 
$('tbody:nth-child(3) .close-edit').on('click', function() { 
    $('tbody:nth-child(3) .detail-edit').toggleClass('open'); 
}); 

が、私は私のDBまたは1000 +に50+のエントリを取得すると仮定すると、私がいくつかを試してみました仕事

を行うには悪夢になるだろう：私は以下のなかったことを実現するために

$('table > tbody td:last-child').each(function (index) { 
    $(this).find('.btn-action-edit').on('click', function(e) { 
      e.preventDefault(); 
      $('.detail-edit').toggleClass('open'); 
    }); 
}); 

でも動作しません。

これに関するアイデア。私はループやDOMに関する何かが欠けている！

ありがとうございました

Answer 1

このようなものはうまくいくはずです。

$(".btn-action-edit").on("click", function() { 
    $(this).closest("tbody").find(".detail-edit").toggleClass("open"); 
}); 

更新：

あなたはAjaxを経由でコンテンツをロードしているとして、あなたはこのように、一般的なイベントリスナーを設定できます。

$(document).on("click", ".btn-action-edit", function() { 
    $(this).closest("tbody").find(".detail-edit").toggleClass("open"); 
}); 

これは、アイテムかどうかをピックアップしますそれがロードされたとき、または後でAjaxで引っ張られたときにページ上にありました。

Answer 2

すべての結果がサーバーによってレンダリングされ、それを追加するだけの場合は、eventListenerをクラスに追加してイベントターゲットに対して相対的に使用するのはなぜですか？

$('button.btn-action-edit').on('click', function() { 
    $(this).closest('tbody').find('.detail-edit').toggleClass('open'); 
}); 

$('button.close-edit').on('click', function() { 
    $(this).closest('tbody').find('.detail-edit').toggleClass('open'); 
}); 

要素をajaxでロードする場合は、追加されたコンテンツにもリスナーを追加する必要があります。しかし、イベントリスナの多くは良いものではありません、私はボタンのonclick属性を使用することをお勧めいたします：

<button class="btn-action-edit" onclick="itemEdit(this);"> ... </button> 
<button class="close-edit" onclick="closeItemEdit(this);"> ... </button> 

<script> 
function itemEdit(element) 
{ 
    $(this).closest('tbody').find('.detail-edit').toggleClass('open'); 
} 

function closeItemEdit(element) 
{ 
    $(this).closest('tbody').find('.detail-edit').toggleClass('open'); 
} 
</script>