JQuery가 테이블 행을 인식하지 못함

Question

내 테이블의 데이터에 JQuery 템플릿을 사용하고 있으며 CSS가 쿼리 템플릿 스크립트의 테이블 행을 인식하고 원하는 스타일을 지정하지만 어떤 이유로 동일한 식별자를 사용하여 동일한 행을 $() 클릭 할 수 없습니다. 여기에 테이블의 코드는 다음과 같습니다

그리고 JQuery와

<script id="donorTemplate" type="text/x-jquery-tmpl"> 
<tr id="indexTR"> 
    <td>${Person.LastName}, ${Person.FirstName}</td> 
    <td>${Address.Address1}</td> 
    <td>${PhoneContact.PhoneNumber}</td> 
    <td>${EmailContact.EmailContactx}</td> 
    <td>${Company.CompanyName}</td> 
    <td><a href="/Donation/Index?id=${Person.PersonID}">Add Donation</a></td> 
    <td> <a href="/Person/Edit?id=${Person.PersonID}">Edit</a> &nbsp; <a href="/Person/Delete?  
id=${Person.PersonID}">Delete</a> &nbsp; 
     <input type="hidden" id="hiddenField" value="${Person.PersonID}"/> 
    </td> 
</tr> 
</script> 

<div id="searchresults"> 
<table id="donor-list"> 
<thead> 
<tr> 
    <th id="f" width="150">Name: </th> 
    <th width="180">Address: </th> 
    <th width="85">Phone: </th> 
    <th width="150">Email: </th> 
    <th width="100">Company: </th> 
    <th width="100"></th> 
    <th id="l" width="100"></th> 
</tr> 
</thead> 
<tbody id="tableBody"> 

</tbody> 
</table> 

....

모든 멋쟁이 ...하지만이 작동하지 않습니다

$("#donorSearch").submit(function (event) { 
     event.preventDefault(); 
     var form = $(this); 
     $.getJSON(form.attr("action"), form.serialize(), function (data) { 
      $("#tableBody #indexTR").remove(); 
      $("#donorTemplate").tmpl(data).appendTo("#tableBody"); 
     }); 
    }); 

:

$("#indexTR").click(function() { 
     alert('test'); 
    }); 

이것이 제가 TR 클릭으로하려고하는 것입니다 :

var val = $("#hiddenField").val(); 
var personID = parseInt(val); 
location.href = "/Person/Details?id=" + personID; 

이전에 JQuery 템플릿으로 전환 할 때까지 작동했습니다. 어떤 제안? 감사!

Answer 1

그렇게 트릭해야 위임 이벤트를 사용하여 준비 할 때 <tr id= "#indexTR">는 DOM에 존재하지 않습니다 jQuery를 1.5

$('#donor-list').on('click', '#indexTR', function(){ 
    alert('test'); 
}); 

을 :

$('#donor-list').delegate('#indexTR', 'click', function(){ 
    alert('test'); 
}); 

또는 첨부 새로운 행 생성마다 콜백.

$.getJSON(form.attr("action"), form.serialize(), function (data) { 
     $("#tableBody #indexTR").remove(); 
     $("#donorTemplate").tmpl(data).appendTo("#tableBody"); 
     // Now attach the event: 
     $("#indexTR").click(function() { 
      alert('test'); 
     }); 
    }); 

그리고 당신은 같은 id 여러 요소와 함께 문제가있어. 귀하의 질문에 대한 논평에서 논의 된대로