JQuery不识别单击表行

I'm using JQuery template for the data for my table... and the CSS recognizes the table rows inside the query template script and styles them how I want... but for some reason I can't call a $().click on those same rows using the same identifier. Here's the table code:

我正在使用JQuery模板为我的表提供数据……CSS识别查询模板脚本中的表格行，并按照我想要的方式对它们进行样式化……但是出于某种原因，我不能调用$()。使用相同的标识符单击相同的行。这是表的代码:

<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>

And the JQuery....

和JQuery ....

$("#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");
        });
    });

That's all dandy... but this doesn't work:

这就是花花公子…但这并不工作:

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

This is what I'm trying to do on a TR click:

这就是我在点击TR时想要做的:

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

which worked before until I switched over to the JQuery template. Any suggestions? Thanks!

这在我切换到JQuery模板之前是有效的。有什么建议吗?谢谢!

1 个解决方案

#1

The <tr id= "#indexTR"> doesn't exist in the DOM when it was ready so using delegate event should do the trick:

当使用委托事件时，在DOM中不存在。

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

For jQuery 1.5:

jQuery 1.5:

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

Or attach the callback on every new creation of a row.

或者将回调附加到每个新创建的行上。

$.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');
        });
    });

And you got the problem with multiple elements with the same id. as discussed in the comments of your question.

就像你的问题评论中讨论的那样，你得到了同一个id的多个元素的问题。

#1