0 
    <div class="parent">
        <div class="child">
        </div>
    </div>
    <script type="text/javascript">
    $(document).on("click", ".parent", function(event){
        doAjaxCall();
    });

    $(document).on("click", ".child", function(event){
        doSomething(); // and DON'T call doAjaxCall();
    });
</script>

event.stopPropagation();而且return false;也不工作。可能是什么问题呢？

编辑：好的，很明显它正在使用 js fiddle：http: //jsfiddle.net/Smbb4/ 我必须再次检查我的代码..

编辑2：解决方案：

    $('.parent').click(function(event) {

        if ( $(event.target).closest('.child').length > 0 ) {
            var close = $(event.target).closest('.child');
            var windowID = close.data('windowid');

            closeWindow(windowID);
            return false;
        }
        });
4

3 回答 3

4

对于父级，您只需要一个单击处理程序。以常规方式处理事件，除非最初的目标在孩子内部，在这种情况下你分支并做一些不同的事情。

$(document).on("click", ".parent", function(event){

    if ( $(event.target).closest('.child').length > 0 ) {
        doSomething;
        return false;
    }

    doAjaxCall();
});
于 2012-12-02T10:20:49.817 回答
1

试试这个方法

$(".parent").click(function() {

});

$(".child").click(function() {

});

它应该可以正常工作。不必将它们放在 document.ready 函数中

于 2012-12-02T09:57:26.170 回答
-1

发现问题：

由于您在 body 元素上使用 on 而不是直接在 img.theater 上使用，因此事件将冒泡到 body 元素，这就是它的工作原理。

在事件冒泡的过程中 .theater-wrapper 元素单击事件将被触发，因此您可以看到它。

jQuery on() stopPropagation 不起作用？

解决方案：

$('.parentParent').on("click", ".child", function(event){});
于 2012-12-02T10:15:38.607 回答