0

我对 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;
         }
    });
});
4

4 回答 4

2

问题在于您的点击处理程序。当您单击新创建的li并单击它时。它实际上没有绑定一个click事件，而是它的父li的click事件启动并删除它。您可以使用事件委托来为新添加的元素使用点击事件on()。

请参阅.on()的文档

演示

尝试这个：-

 $('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的都将通过委托获得自己的点击事件。

于 2013-05-28T02:59:48.080 回答
2

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

试试这个来只匹配<li>s （在 a 里面<ul>）

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

注意：以下几点最初由 PSL 发现并回答。只需编辑此答案即可消除错误。

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

$("ul").on('click', 'li', function() {
    ...
});
于 2013-05-28T02:53:34.990 回答
1

工作 FIDDLE 演示

因为您是动态创建新元素，所以必须使用.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;
        }
    });
});

参考：

于 2013-05-28T03:01:53.707 回答
0

你有一个元素树，你也可以在它的父级上触发点击事件。

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

这将确保 click 事件实际上是在所需的元素上触发的，而不是在它的任何子元素上触发的。

另请参阅 stopPropagation 的 API 参考

于 2013-05-28T02:57:02.510 回答