jquery - jQuery：在动态添加DOM元素时尝试将函数挂钩到onclick，但它会立即执行该函数

Question

我正在使用 jQuery 动态地（我的意思是在运行时）向我的页面的 DOM 添加一个 span 元素：

// create add task button
$(document.createElement("span"))
    .attr({ id: activityNameHyphened + "-NewButton", name: activityNameHyphened + "-NewButton" })
    .addClass("smallButton")
    .appendTo(cell1)
    .click(CreateTaskRow(ActivityName));

问题是最后一行：我认为它会添加 CreateTaskRow(ActivityName) 作为跨度的 onclick 事件的处理程序，就像：

<span onclick="CreateTaskRow(ActivityName);"></span>

这就是我想要的 - 但是当我在浏览器中运行它时，我可以看到使用调试器在这一行它立即运行该函数。

如果我可以说得更清楚：当我尝试将它添加到 onclick 时运行 CreateTaskRow()（我希望它仅在用户实际单击跨度时运行）。

知道我做错了什么吗？（如果我的问题不够清楚，请告诉我）

Answer 1

您实际上是在调用函数并将结果传递给.click()事件处理程序。尝试使用闭包（匿名函数）代替：

.click(function() {
    CreateTaskRow(ActivityName);
});

click在触发事件之前，关闭不会运行。

Answer 2

尝试关闭

$("<span>")
    .attr({ id: activityNameHyphened + "-NewButton", name: activityNameHyphened + "-NewButton" })
    .addClass("smallButton")
    .appendTo(cell1)
    .click(function() { CreateTaskRow(ActivityName); });

工作演示

演示中的代码 -

$(function() {

  var activityNameHyphened = "id1";
  var ActivityName = "This is the highlighted activity";

  $('#clickMe').click(function() {

    $("<span>I've been added</span>")
        .attr({ id: activityNameHyphened + "-NewButton", 
              name: activityNameHyphened + "-NewButton" 
            })
        .addClass("smallButton")
        .appendTo("#here")
        .click(function() { CreateTaskRow(ActivityName); });        
  });    
});


function CreateTaskRow(e)
{
  alert(e);
}

Answer 3

live()您可以在使用方法创建元素之前为创建的元素定义事件处理程序。

$("span.smallButton").live("click", function () {
    CreateTaskRow(ActivityName);
});

然后，当您创建新元素时，您不必记住将事件挂钩到它。

$(document.createElement("span"))
    .attr({ id: activityNameHyphened + "-NewButton", name: activityNameHyphened + "-NewButton" })
    .addClass("smallButton")
    .appendTo(cell1);

Answer 4

.click 触发点击事件，必须将函数绑定到点击事件：

$("p").bind("click", function(e) {
      var str = "( " + e.pageX + ", " + e.pageY + " )";
      $("span").text("Click happened! " + str);
});