Question

我有一个html如下：

<div class="parent"> 
  <a href="#">parent</a>
  <div class="child">child</div>
</div>

这是我的Jquery绑定click事件：

$(document).ready(function(){
    $('.parent').on('click', function(){
        alert('parent div');
    });

    $('.child').on('click', function(){
        alert('child div');
    });
});

我想，如果我点击".child" div，则不应调用"div.parent"上的事件绑定。再次，如果我点击".parent" div并且应该执行它的绑定事件。

我试过以下 -

 $('.child').on('click', function(){
        alert('child div');
        $(this).parents('.parent').off('click');
        return false;
    });

但是上面的代码已永久取消"click" parent div上的DateAxis事件，再次点击事件不会触发。

Answer 1

为什么不停止传播以防止从孩子那里冒泡来实现这个

$_POST['taskname']

Answer 2

点击子div后，事件会在DOM树中冒泡，导致父div被触发，现在为了防止这种情况，您需要使用event.stopPropagation()更多信息来停止传播{{ 3}}

 $('.child').on('click', function(event){
    event.stopPropagation();
    alert('child div');
    return false;
});

Answer 3

高塔姆，

有趣的问题。我在想子类。但是由于你有div元素相互包裹，这是不可行的。因此，我建议使用以下函数来切换响应，直到下次单击它为止。

makeParentReady = function() {
    $('.parent').on('click', function(){
    myClass=this.className;
    alert('parent div');

    });

}

$(document).ready(function(){
        makeParentReady();

        $('.child').on('click', function(){
            myClass=this.className;
            alert('child div');
            $(this).parents('.parent').off('click');
            makeParentReady();
            return false;
            });
        });

Answer 4

是。 Dhiraj是对的。使用topPropagation（）函数

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
    $('.parent').on('click', function(){
        alert('parent div');
        $('.child').click();
    });

    $('.child').on('click', function(e){
        e.stopPropagation()
        alert('child div');
    });
});

</script>

</head>
<body>

<div class="parent"> 
  <a href="#">parent</a>
  <div class="child">child</div>
</div>

</body>
</html>

jquery在另一个绑定事件中调用事件

4 个答案: