jQuery:在页面加载时尝试将函数挂钩到onclick

Question

我已经看到了类似的问题，HERE，并尝试了它，但我似乎不能让它工作。下面是我用于动态生成表行的代码。

for (var contribution = 0; contribution < candidate.contributions.length - 1; contribution++) {
    var id = candidate.contributions[contribution].donor_id;
    var uid = candidate.contributions[contribution].user_id;

    $("#history-table").append(
        "<tr onclick='" + parent.viewEngine.pageChange('public-profile', 1, id, uid) + ";>" +
        "<td class='img-cell'>" +
        "<img class='profile-avatar-small' src='/uploads/profile-pictures/" +
        candidate.contributions[contribution].image + "' alt='' /></td><td class=''>" +
        "<h2>" + candidate.contributions[contribution].firstname +
        " " + candidate.contributions[contribution].lastname + "</h2></a><br/><br/>" +
        "<span class='contribution-description'>" + candidate.contributions[contribution].contribution_description + "</span></td>" +
        "<td><h3>$" + formatCurrency(candidate.contributions[contribution].contribution_amount) + "</h3></td></tr>");
}

这仍然会在页面加载时立即执行单击事件，这不是所需的行为。我需要能够单击tr来执行单击事件。

Answer 1

(我真的不推荐使用这样的内联事件处理程序，特别是当您已经在使用jQuery时，但不管怎样...)

问题是，您需要函数的名称在传递给.append()的字符串中结束，但您只需调用函数并追加结果。试试这个：

...
"<tr onclick='parent.viewEngine.pageChange(\"public-profile\", 1, " + id + "," + uid + ");'>" +
...

这将创建一个包含函数名和前两个参数的字符串，但随后将当前循环迭代中的id和uid变量的值相加，以便完整的字符串包含格式适当的函数名和参数。

注意，"public-profile"两边的引号是单引号，但这不起作用，因为您的onclick='...'也使用了单引号，所以您应该使用双引号，但需要对它们进行转义，因为整个字符串都在双引号中。

Answer 2

将整个内容作为字符串进行传递：

"<tr onclick='parent.viewEngine.pageChange(\'public-profile\', 1, " + id + ", " + uid + ");>" // + (...)

但是，由于您正在使用jQuery，因此您应该使用 click附加单击处理程序

Answer 3

我想知道你能不能把事情简单化一点。

如果您的行是动态添加的，那么尝试在<tr>标记中放置某种类型的元数据，例如如下所示：

<tr id="id" name="uid">

然后使用您的jQuery (需要v.1.7)尝试以下操作：

$('#history-table tr').on('click', function(){
  parent.viewEngine.pageChange('public-profile', 1, this.id, this.name);
});

这可能需要修改，这取决于页面渲染的工作方式，但从主表标记中删除后，它要干净得多，也更容易阅读。