0

小提琴：http: //jsfiddle.net/8TxmK/

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

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

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

}));

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

    alert('bb class clicked')

}));

所以我想在单击时将Class 'bb' 添加到第二个div。这工作正常。但是，点击时的第二部分 'bb' 不适用于从一开始就没有加载 'bb' 类的 div。

有什么解决方法吗？

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

4

2 回答 2

2

是的……代表。将 body 替换为加载 dom 时存在的最近的父级

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

});
于 2012-08-04T14:30:37.103 回答
2

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

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

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

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

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

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

<style>
    div{width:300px;height:100px;background:pink;margin-bottom:10px;}
    .bb{border:10px solid black;}
​&lt;/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时弹出警报的原因。

于 2012-08-04T14:35:47.503 回答