添付されたチェックボックスを選択する方法

Question

JQueryの使用私はtdの1つにチェックボックスを含むtrを追加します。それは画面上にうまく表示されます。しかし、私はチェックボックスの1つを選択し、クリック時に機能をトリガーしたい。何らかの理由でセレクタに追加されたチェックボックスが表示されません。私はチェックボックスがHTMLソースコードの中に実際にはないので、これが原因だと思います。

質問：このチェックボックスを選択するにはどうすればよいですか？

$.each(categories, function (i, product) { 
    $(".table_products").append('<tr class="empty"><td >' + product.product_name + '</td><td>' + product.price + '</td><td> <input type="checkbox" value="cat_id"></td></tr>'); 

    $("tr").addClass("cat_products"); 
}); 

$("td input:checkbox").on('click', function() { 
    alert('line 41'); 
}); 

Answer 1

イベントの仕組みを簡単に説明する必要があります。 JavaScriptでは、イベントは「バブル」になります。これは、スパンをクリックすると、最初にスパンがクリックイベントを取得することを意味します。次に、クリックイベントはスパンの親までバブルします（divとしましょう）。その後、イベントはそこからチェーン内の次の要素にバブルします。あなたがDOMの一番上の要素に到達するまで。

jQueryのは、あなたのドキュメント内の任意のレベルにイベントリスナーをアタッチすることができます。また、フィルタリングする機能も提供します。だから我々はこれを行うとき：

$('.table_products').on('click', 'td input:checkbox', function(){...});

我々は.table_products要素にイベントリスナーをアタッチしています。この要素は決して変化しません。それはいつもそこにある。私たちが追加したのはフィルター部分、または'td input:checkbox'でした。この部分はjQueryに "テーブル内でクリックイベントが発生したときに、このフィルタに一致する子要素にそのクリックイベントが発生したかどうかを調べ、確認します。

これにより、新しく追加された要素をリスナーが取り上げることができます。この説明が役立つことを願っています。あなたは `.onを実行しているようなコードがある限り動作する必要があることをより多くの情報here