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

확인, 문제는 사용 된 jQuery를 나쁜 버전이었다.

그냥 마지막 jQuery 버전의 CDN을 사용하고 캐시를 새로 고쳐 작동 중입니다.