Question

我正在动态地使用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）作为span的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); });

<强> Working Demo

演示代码 -

$(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触发click事件，您必须将该函数绑定到click事件：

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

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

4 个答案: