Question

我有两个div，一个有class =“bb”，另一个没有类。在我的jquery中，我应用了以下函数：

$('div').on('click',(function(){

    $(this).addClass('bb');

}));

$('.bb').on('click',(function(){

    alert('bb class clicked')

}));

所以我想在点击时将classC''bb'添加到第二个div。这很好用。但是，点击的第二部分'bb'对于从一开始没有加载'bb'类的div不起作用。

有没有解决方法呢？

我试过这个：http://jsfiddle.net/M8Ja4/ 但是这个功能每次都会重复一次。

Answer 1

是..代表。将主体替换为加载dom时存在的最近父代

$('body').on('click','.bb',function(){

});

Answer 2

您有两种选择。如果您使用的是jQuery 1.7+，请使用.on()方法动态附加事件处理程序：

$(document).on('click','.bb',function() { });

如果您使用的是旧版jQuery，请使用.delegate()：

$(document).delegate('.bb','click',function() { });

虽然这些示例使用document，但您可以使用任何DOM元素。我的建议是尽可能使用尽可能最低的元素（元素的最近祖先为.bb），这样您就可以更快地捕获事件，并在必要时阻止传播到文档级别。您可能听说过.live()方法，但在1.7中已弃用，jQuery团队建议即使在较旧的项目中也停止使用。

您在另一个答案的评论中发布的example是事件冒泡的完美示例。

<style>
    div{width:300px;height:100px;background:pink;margin-bottom:10px;}
    .bb{border:10px solid black;}
</style>

<div></div>
<div class="bb"></div>

<script>
    $(document).ready(function () }{

        $('div').on('click',(function(){
            $(this).addClass('bb');
        }));

        $('body').on('click','.bb',function(){
            alert('bb class clicked');
        });
    });
</script>

在该示例中，当您单击div而没有bb类时，它会添加类，然后事件冒泡到body并触发那里，这是为什么警告会在首次点击时弹出。

addClass到div然后应用于单击到新类Jquery

2 个答案: