jQuery的：试图钩住时动态地添加DOM元素的onclick的功能，但它立即代替执行函数(jQue

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

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

这就是我想要的-但是当我在浏览器中运行它，我可以看到使用，在这条线就立即运行的功能 ，而不是调试器。

如果我能说得清楚：CreateTaskRow（）当我试图将它添加到的onclick（我希望它只能运行在用户实际点击的跨度）运行。

任何想法，我做错了什么？ （并请让我知道，如果我的问题不够清晰）

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

文章来源: jQuery: trying hook a function to the onclick when dynamically adding a DOM element, but it immediately executes the function instead