Question

我是jQuery的新手，我遇到了一个问题。

当我尝试删除元素时，它起作用，但是当我添加新元素然后尝试删除它时，其他兄弟元素li元素也会被删除。我该如何解决？

这是基本结构：

<br/>
<b>Delete</b>
<input type="radio" id="delnod" name="action" title="Delete"/>     
<br/>  
<b>Add</b>        
<input type="radio" id="addnod" name="action" title="Add"/>
<br/>  
        <ul id="rodzic">
        <li id="xx">XX
            <ul id="cv">
                <li id="vb">aa</li>
                <li id="hh">vv</li>
                <li id="fg">cc</li>
            </ul>
        </li>
        <li id="yy">YY
            <ul id="zz">
                <li id="vv">12</li>
                <li id="vx">34</li>
                <li id="vz">55</li>
            </ul>
        </li>            
    </ul>

这就是jQuery代码：

  $(document).ready(function() {
    $("ul,li").click(function() {
        if ($('#delnod').is(':checked'))
        {
            if (confirm('Do you want to delete?'))
            {
                $(this).remove();
                return false;
            }
        }


        if ($('#addnod').is(':checked'))
        {

            $("<li>And me too!</li>").insertAfter(this);
   //       $(this).closest('ul').children(':last').before('<li />'); 
                return false;
         }
    });
});

Answer 1

您在$("ul,li")处理程序之前使用的选择器.click()看起来不正确。它将匹配所有<ul> s 和 <li> s，而不仅仅是<li> s。

请尝试将此选项仅匹配<li> s（位于<ul>内）

$("ul li").click(function() {
    ...
});

注意：最初由PSL发现并回答的以下观点。只需编辑此答案即可消除不正确之处。

另一个原因是，你新创建的LI没有附加任何事件处理程序，使用.on()绑定到父级元素将解决它。

$("ul").on('click', 'li', function() {
    ...
});

Answer 2

问题在于您的点击处理程序。当您单击新创建的li并单击它时。它实际上没有绑定到它的点击事件，而是它的父li点击事件开始并删除它。您可以使用on()为新添加的元素使用事件委派进行点击事件。

请参阅.on()

的文档

Demo

试试这个： -

 $('ul').on('click' , 'li', function() {// I have provided ul as an example, You may want to attach it to the container of ul that already exists. Say a div.
             if ($('#delnod').is(':checked'))
        {
            if (confirm('Do you want to delete?'))
            {
                $(this).remove();
                return false;
            }
        }

此事件附加到ul，任何新创建的li都会通过委派获得自己的点击事件。

Answer 3

Working FIDDLE Demo

因为您动态创建新元素，所以必须使用.on()方法：

$('body').on('click', 'ul li', function() {
    // code
});

如果要插入新元素，则必须使用：

$("<li>And me too!</li>").appendTo($(this).closest('ul'));

以下是完整代码：

$(document).ready(function() {
    $('body').on('click', 'ul li', function() {
        if ($('#delnod').is(':checked')) {
            if (confirm('Do you want to delete?')) {
                $(this).remove();
                return false;
            }
        }

        if ($('#addnod').is(':checked')) {
            $("<li>And me too!</li>").appendTo($(this).closest('ul'));
            return false;
        }
    });
});

参考文献：

.on() - jQuery API文档
.appendTo() - jQuery API文档
.closest() - jQuery API文档

Answer 4

你有一个元素树，父母也会触发点击事件。

$(...).click(function(e){ if (e.target !== this) { return false; } /* your code here */

这将确保click事件实际上是在所需的元素及其子元素上实际触发的。

还可以看到stopPropagation的API参考

在jQuery中添加和删除html元素

4 个答案:

Demo