DOM内にない要素にバインドする

Question

<tr>を動的に追加するスクリプトがありますが、その中に含まれている要素は、DOMにまだロードされていないため、jQueryによって認識されないようです。

私は.on機能を使用しようとしましたが、機能しません。

アイデアはありますか？

$(document).ready(function(){ 
    $("#add_item").click(function(e){ 
    e.preventDefault(); 
    var nbeTr = $(".tablerow").length; 
    if (nbeTr < 10){ 
     $(".tablerow:last").after("<tr class='filleul'><td></td><td></td><td></td><td><button class='newtr'>X</button></td></tr>"); 
    } 
    }); 
    $(document).on("click", ".newtr", function(event) { 
    event.preventDefault(); 
    alert("Yo"); 
    }); 
}); 

Answer 1

ボタン要素の作成時にイベントリスナーを登録する必要があります。今では、未定義の要素にクリックイベントを登録しようとしています。

// create button 
$ele = $("<button class='newtr'>X</button>"); 
// bind event listener to button 
$ele.on("click", function() { alert("hello"); }); 
// insert $ele into DOM 
$target.append($ele); 

Answer 2

ちょっとあなたのコードが動作している、私は問題がどこか他の場所だと思う。

は、この実施例を参照してください：

$(document).ready(function() { 
 
    $("#add_item").click(function(e) { 
 
    e.preventDefault(); 
 
    var nbeTr = $(".tablerow").length; 
 
    if (nbeTr < 10) { 
 
     $(".tablerow:last").after("<tr class='tablerow filleul'><td>1</td><td>2</td><td>3</td><td><button class='newtr'>X</button></td></tr>"); 
 
    } 
 
    }); 
 
    $(document).on("click", ".newtr", function(event) { 
 
    event.preventDefault(); 
 
    alert("Yo"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<button id='add_item'>Add item</button> 
 
<table> 
 
    <tr class='tablerow'> 
 
    <td>c1</td> 
 
    <td>c2</td> 
 
    <td>c3</td> 
 
    <td> 
 
     <button class='newtr'>X</button> 
 
    </td> 
 
    </tr> 
 
    <table>

Answer 3

[OK]を、問題が使用していたのjQueryの悪いバージョンでした。

私はちょうど最後のjQueryバージョンのCDNを使用し、キャッシュをリフレッシュして動作しています。