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

Question

我在这里看到了类似的问题，并尝试了该问题，但似乎无法正常工作。 这是我用于动态生成表行的代码。

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

页面加载后，它仍会执行click事件，这不是所需的行为。 我需要能够单击tr来执行click事件。

Answer 1

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

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

但是，当您使用jQuery时，应该将点击处理程序附加到.on() 。

Answer 2

我想知道您是否可以更好地简化事情。

如果要动态添加行，请尝试在<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);
});

这可能需要进行修改，具体取决于页面呈现的工作方式，但是从主表标记中删除后，它更加整洁且易于阅读。

Answer 3

（我真的不建议使用这样的内联事件处理程序，尤其是当您已经在使用jQuery，但是无论如何...）

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

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

这将创建一个包含函数名称和前两个参数的字符串，但是会添加当前循环迭代中id和uid变量的值，以使完整的字符串包含格式正确的函数名称和参数。

请注意， "public-profile"周围的引号是单引号，但由于您在onclick='...'也使用了单引号，因此这是行不通onclick='...' ，因此应使用双引号，但必须使用双引号。转义，因为整个字符串都用双引号引起来。

Answer 4

那是因为您正在执行该函数，而不是对其进行串联。 尝试：

onclick='parent.viewEngine.pageChange("public-profile", 1, id, uid);'

Answer 5

拿这个->

$("#contribution-" + uid).click(function(){
  parent.viewEngine.pageChange('public-profile',1, id, uid);
});

并做两件事：

1） 将其移至“ for”语句之外

一旦执行了for语句，click函数也将被执行。 在此for语句中，click函数未作为回调函数提供。

2）将其更改为->

$("tr[id^='contribution-'").on('click', function(){
  var idString = $(this).attr("id").split("-"); //split the ID string on every hyphen
  var uid = idString[1]; //our UID sits on the otherside of the hyphen, so we use [1] to selec it
  //our UID will now be what we need. we also apply our click function to every anchor element that has an id beginning with 'contribution-'. should do the trick.
  parent.viewEngine.pageChange('public-profile',1, id, uid); 
});

这是我的解决方案。