0

我有一个带有链接的页面，当按下链接时，我想使用 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>

以及将 li 添加到 ul 与我的功能不同的任何建议？

4

4 回答 4

3

问题是您正在向aDOM 添加一个新元素，但事件处理程序绑定到旧元素。您可以使用事件委托（使用 jQueryon方法，或者delegate如果您使用低于 1.7 的版本）来捕获 DOM 树更高的点击事件：

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

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

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

于 2012-05-15T16:05:56.107 回答
2

那是因为您稍后会动态插入元素。用于.on附加单击事件处理程序，这将确保动态插入的元素也调用事件处理程序。

$("#addRelation").on('click', '.araNew', function(){
    // code here        
});
于 2012-05-15T16:05:46.867 回答
2

像这样在$.on语法中添加附加代码

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

});

在此处检查工作小提琴

于 2012-05-15T16:06:25.497 回答
1

您隐藏了旧的araNew并添加了一个新的，而没有将点击绑定到它。

于 2012-05-15T16:07:49.657 回答