使用jquery将li添加到ul只工作一次

Question

我有一个带有链接的页面，当按下我想用jQuery向UL添加新LI的链接时，我创建了我的jQuery函数，它只工作了一次，我的意思是，jQuery函数只适用于点击

的jquery

$("#addRelation").ready(function (){
    $("#addRelation a").css("padding","6px");
    $("#addRelation .araNew").bind('click',function(){
        $("#addRelation .araNew").hide();
        $("#addRelation ul li:last").append('<li> \n\
<p>\n\
      <label>Source</label>\n\
      <select name="source[]" id="source">\n\
             <option>select source</option>\n\
      </select>\n\
</p>\n\
<p>\n\
      <label>Destination</label>\n\
      <select name="destination[]" id="destination">\n\
              <option>select destination</option>\n\
      </select>\n\
</p>\n\
 <p>\n\
       <a href="#" class="araNew">new</a> \n\
       <a href="#" class="araDel">delete</a> \n\
</p>\n\
</li>');
    });

的HTML

<div class="container" id="addRelation">
    <ul class="containerUL">
        <li class="containerLI">
            <label>Name</label>
            <input type="text" name="relationName" class="longInput1"/>
            <div id="arSuggestions"></div>
        </li>
        <li>
            <label>Related Concepts</label>
            <p>
                <label>Source</label>
                <select name="source[]" id="source">
                    <option>select source</option>
                </select>
            </p>
            <p>
                <label>Destination</label>
                <select name="destination[]" id="destination">
                    <option>select destination</option>
                </select>
            </p>
            <p>
                <a href="#" class="araNew">new</a>
                <a href="" class="araDel">delete</a>
            </p>
        </li>
    </ul>
</div>

还有任何建议将li添加到ul不同于我的函数吗？

Answer 1

问题是您要向DOM添加新的a元素，但事件处理程序绑定到旧元素。您可以使用事件委派（使用jQuery on方法，或delegate如果您使用的是低于1.7的版本）来捕获DOM树上方的click事件：

$("#addRelation").on("click", ".araNew", function() {
    //Do stuff...
});

这将在到达祖先div元素时捕获click事件。它将检查事件目标是否与.araNew匹配，如果匹配则将执行事件处理程序。这样，无论您单击哪个匹配.araNew的元素，处理程序都将执行。

或者，您只需移动ul之外的“新”和“删除”链接，而不是每次都创建新链接。

Answer 2

那是因为你以后动态插入元素。使用.on附加click事件处理程序，这将确保为动态插入的元素调用事件处理程序。

$("#addRelation").on('click', '.araNew', function(){
    // code here        
}); 

Answer 3

在$.on语法中添加您的追加代码，如下所示

$("#addRelation").on('click','.araNew',function(){
 // add li code

});

检查工作fiddle here

Answer 4

您正在隐藏旧版araNew并添加新版本而不将点击绑定到它。