追加与事件处理程序的元件，以一组元素

的考虑的JavaScript/jQuery代码：追加与事件处理程序的元件，以一组元素

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

这就产生了一个按钮，结合一个事件处理程序，并将其附加到与类别“的所有元素someDiv ”。

只有在文档中只有一个类为“someDiv”的元素时，才能按预期工作。如果还有更多，则显示按钮，但点击事件不会被触发。

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

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

其中一期工程，但可以说是那么优雅。

我猜它是与在第一个例子中有只创建一个元素，即相同的元素被添加到所有的“someDiv” s左右，而在第二个例子中有产生实际多个元素，但我不明白为什么这将意味着事件处理程序在第一个示例中不起作用。

来源

2009-08-25 Knut Arne Vedaa

你使用的是什么版本的jQuery？我尝试了你的原始示例和我的1.3.2解决方案，他们都工作。 – Jataro 2009-08-25 22:53:04

我正在使用旧版本（1.1.4）。试用1.3.2版本，两个版本都有效。结论：旧版本的错误。（为了兼容性原因我必须坚持......） – 2009-08-25 23:02:07

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

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

来源

2009-08-25 22:28:24 karim79

这也是一个可行的解决方案，但它并不能解释原始问题的“原因”。 :) – 2009-08-25 22:48:08

@Knut Arne Vedaa - 说实话，我不完全确定为什么第一个不起作用。我可以猜测这是因为click事件处理程序不会粘住，因为在返回多个元素的选择器上调用appendTo时，appendTo将隐式创建没有附加事件处理程序的元素的副本。 – karim79 2009-08-26 00:02:03

这是一种奇怪的方式做到这一点。我会用live来连接它。

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

而且不知道做什么多ATTR呼唤你：

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

来源

2009-08-25 22:29:24

多个attr调用有助于避免“这种”'撇号'用法“。它对我来说看起来更清洁，可能是一种主观的东西。 :) – 2009-08-25 22:46:54

我想你正在寻找的是克隆（真）。它将制作DOM元素及其事件处理程序的副本。

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

来源

2009-08-25 22:33:34 Jataro

不，这不起作用，不幸的。 – 2009-08-25 22:48:49

经过测试并与jQuery 1.3.2一起工作 – Jataro 2009-08-25 23:18:21

追加与事件处理程序的元件，以一组元素

回答

相关问题