Question

我有一个jQuery / PHP脚本，它接收UL列表中的其他级别。例如：

<ul class="obj">
<li>Object A</li>
<li>Object B</li>
</ul>

点击LI元素后，jQuery将另一个列表追加到POST收到的这个元素：

<ul class="obj">
<li>Object A
<ul class="obj">
<li>Object A1</li>
<li>Object A2</li>
</ul>
</li>
</li>Object B</li>

然后，当我想点击'Object A1'元素并向其追加另一个列表时，list会追加到父元素，因为两者都是“.obj li”元素。我的jQuery代码：

$(function(){
        $(".obj li").click(function(){
            var el = $(this);
            $.post('get_rel.php',
                function(data){
                    $(el).append(data)
                    el = null;
            });

        })
    })

如何在clicked（child）元素上完全调用click事件？谢谢你的帮助。

Answer 1

造成这种情况的原因是click()处理程序仅在您调用click()时绑定到页面上的元素。将子元素添加到列表时，click事件会冒泡到顶级li，并且触发了事件处理程序。在这里，this是顶级li，这就是新元素出现的原因。

相反，你应该使用事件委托，它将触发所有当前的和将来的元素，处理程序内的this将是当前元素（在这种情况下的重要部分）

$(document).on('click', '.obj li', function () {
    var el = $(this);
    $.post('get_rel.php',
        function(data){
            $(el).append(data)
            el = null;
    });
});

on()是在1.7中引入的，所以如果您使用的是旧版本（并且无法升级），则应使用delegate()：

$(document).delegate('.obj li', 'click', function () {
    var el = $(this);
    $.post('get_rel.php',
        function(data){
            $(el).append(data)
            el = null;
    });
});

Answer 2

您可以在事件处理程序中使用e.stopPropagation()

jQuery：单击列表中子元素的事件

2 个答案: