Question

考虑javascript / jQuery代码：

  jQuery("<input/>").attr("type", "button").attr("value", "Click me")
     .click(function()
     {
        alert("hello");
     })
     .appendTo(".someDiv");

这将创建一个按钮，将事件处理程序绑定到该按钮并将其附加到具有类“someDiv”的所有元素。

只有在文档中只有一个带有“someDiv”类的元素时，这才能正常工作。如果还有更多，则会显示按钮，但不会触发click事件。

我知道我可以使用以下解决方法：

  jQuery(".someDiv").each(function()
  {
     jQuery("<input/>").attr("type", "button").attr("value", "Click me")
        .click(function()
        {
           alert("hello");
        })
        .appendTo(this);
  });

哪个有效，但可以说不那么优雅。

我想这与第一个例子中有关，只有一个元素被创建，同一个元素被附加到所有“someDiv”，而在第二个例子中实际上创建了多个元素，但我不知道不明白为什么这意味着事件处理程序在第一个例子中不起作用。

Answer 1

你有没有试过这样的事情：

  jQuery("<input/>").attr("type", "button").attr("value", "Click me")
                                           .appendTo(".someDiv");
     jQuery('.someDiv input[type=button]').click(function()
     {
        alert("hello");
     });

Answer 2

这是一种奇怪的方式。我用live连接了它。

$("input[type=button]").click(function() {
  alert("hello");
});

还不确定多个attr调用对你有什么影响：

(".someDiv").append("<input type='button' value='Click me' />");

Answer 3

我认为你要找的是克隆（真实）。它将复制DOM元素及其事件处理程序。

 jQuery("<input/>").attr("type", "button").attr("value", "Click me")
 .click(function()
 {
    alert("hello");
 })
 .clone(true)
 .appendTo(".someDiv");

将带有事件处理程序的元素附加到一组元素

3 个答案: