追加與事件處理程序的元件，以一組元素

的考慮的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

追加與事件處理程序的元件，以一組元素

回答

相關問題