追加动态添加元素

问题描述：

我有一个div，当页面加载时存在。我追加了一个按钮，另一个按钮。然后我想单击按钮并将其添加到其中。追加动态添加元素

到目前为止，第一部分是工作，但我不能追加到了动态创建的任何元素。

$(document).ready(function() { 

    // THIS WORKS 
    $("#Value").change(function() { 
     var value = $("#Value").val(); 
     $("#Question_Field").empty(); 
     for (var i = 1; i <= value; i++) { 
      $("#Question_Field").append('<input type="button" id="button" /><div id="test"></div>'); 
     } 
    }); 

    // THIS DOES NOT WORK 
    $("#test").click(function() { 
     console.log("Click"); 
     ("#test").append(STUFF); 
    }); 
});

它甚至没有记录点击。

答

主要有两个问题。

当你挂钩的情况下，没有#test元素还不存在，所以没有东西挂钩。
你正在创建具有相同id多个元素。

此外，您的通话append缺少$开头。

您可以修复第一使用事件代表团（这个代码修复append以及）：

$(document).on('click', '#test', function() { 
    console.log("Click"); 
    $("#test").append(STUFF); 
});

这告诉jQuery来勾上document的click事件，但只有火处理，如果该事件起源打开或传递与给定选择器匹配的元素（#test），因为它已经冒泡到文档中。

要解决的第二个问题，与同id多个元素，你需要改变你的循环输出的元素。很可能你想要使用一个班级而不是id。

谢谢。这有多高效？是否需要搜索所有元素，直到找到每次匹配#test的元素为止？如果我必须用不同ID的多个元素来做到这一点呢？也许像'#test'+ i – Jeff 2013-02-27 17:18:27

@Jeff：这很有效。在创建事件时，事件生成的实际元素是该事件对象（'event.target'）的一部分。所有jQuery必须做的，一旦点击到达文档，就从'event.target'开始，看它是否与选择器匹配。如果没有，它会转到目标的'parentNode'并检查它。如果不匹配，则转到* that *的'parentNode'。即使你的HTML结构有15个嵌套元素（一个'div'包含另一个'div'，其中包含'tbody'，'tr'，'td'和九个*进一步*级别的'table'），那么，这只是15个元素来检查。 – 2013-02-27 17:21:48

@Jeff：如果你想匹配多个'id'值，你就可以像CSS一样完成这些工作：'#test，#foo，＃bar'。但是，无论何时你列出多个这样的'id'值，你都必须问自己是否应该使用一个类。 – 2013-02-27 17:22:37

答

click只能处理存在时，它被称为元素。您应该检查.live()http://api.jquery.com/live/或.on()http://api.jquery.com/on/取决于你的jQuery版本。

追加动态添加元素

相关推荐