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

【问题标题】：Appending an element with an event handler to a set of elements将带有事件处理程序的元素附加到一组元素
【发布时间】：2009-08-25 22:22:23
【问题描述】：

考虑一下 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”中有关，而在第二个示例中实际上创建了多个元素，但我没有'不明白为什么这意味着事件处理程序在第一个示例中不起作用。

【问题讨论】：

您使用的是什么版本的 jQuery？我用 1.3.2 尝试了你的原始示例和我的解决方案，它们都有效。
我使用的是旧版本 (1.1.4)。用 1.3.2 试过，两个版本都可以。结论：旧版本中的错误。（出于兼容性原因，我将不得不坚持使用...）

标签： jquery events

【解决方案1】：

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

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

【讨论】：

这也是一个可行的解决方案，但它没有解释原始问题的“原因”。 :)
@Knut Arne Vedaa - 老实说，我不完全确定为什么第一个不起作用。我可以猜测这是因为当在返回多个元素的选择器上调用时，click 事件处理程序不会粘住，因为 appendTo 会隐式创建没有附加事件处理程序的元素副本。

【解决方案2】：

这是一种奇怪的做法。我会用live 连接它。

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

也不确定多个 attr 调用对您有什么作用：

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

【讨论】：

多次 attr 调用有助于避免“这种‘撇号’用法”。它对我来说看起来更干净，可能是一个主观的东西。 :)

【解决方案3】：

我认为您正在寻找的是克隆（真）。它将复制 DOM 元素及其事件处理程序。

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

【讨论】：