使用jquery将ul添加到ul只是一次

Question

当按下链接时，我有一个带有链接的页面我想使用jQuery将新的LI添加到UL，我创建了我的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> 

，并添加李书福UL从我的功能不同有什么建议？

Answer 1

内$.on语法添加您的追加这样的代码

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

}); 

检查工作fiddle here

Answer 2

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

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

Answer 3

的问题是，您要添加新的元素a到DOM，但该事件处理程序绑定到老。您可以使用事件代表团（与jQuery的on方法，或者delegate如果你使用低于1.7的版本）来捕获点击事件越往上DOM树：

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

这将当它捕获点击事件到达祖先div元素。它将检查事件目标是否匹配.araNew，如果它确实会执行事件处理程序。这样，无论您点击哪个元素匹配.araNew，处理程序都会执行。

或者，您可以简单地将“新”和“删除”链接移动到ul以外，而不是每次都创建新链接。

Answer 4

你躲在老araNew并添加一个新的，而不点击绑定到它。