Question

html片段：

<p>add more</p>
<div class="display_box_ppl_tag" style="border:1px solid red; width:120px; text-align:center;">
    this is the display box text
</div>

js片段：

$(document).ready(function() {

    $(document).on('click', $(".display_box_ppl_tag"), function(e) {
        //$(".display_box_ppl_tag").on('click',function(){
        e.stop Propagation();
        alert("yes clicked");
    });

    $('p').click(function() {

        $('.display_box_ppl_tag:last').after('<div class="display_box_ppl_tag">this is display box ppl tag</div>');

    });

});

通过代码的意图是，单击</p>将在具有相同类名的现有元素之后添加具有类“display_box_ppl_tag”的新元素，并单击任何具有类'display_box_ppl_tag的div '将启动一个警报框。但是当点击</p>时，启动警报框时不会点击上述div。

为什么会这样？

再次改变以下行
```
$(document).on('click',$(".display_box_ppl_tag"),function(e){
```
到
```
$('.display_box_ppl_tag').on('click',function(){,
```
'click'事件未附加到新创建的元素。但是从API，我发现'如果选择器为空或被省略，则事件总是在到达所选元素时被触发。'
为什么后面的编码不能按预期工作？

Answer 1

看起来你想要：

$(document).on('click', '.display_box_ppl_tag', function(){

这就是说当你点击文件的子节点'.display_box_ppl_tag'（包括这个类的新元素）时，事件应该触发。

第一个：

$(document).on('click',$(".display_box_ppl_tag"),function(e){

只是不正确的语法，因为第二个参数不是“选择器字符串”（参见docs）。我不确定jQuery如何解释这个，但它可能只相当于：

$(document).on('click', function(e){

会在任何点击时触发。

正如你所说，第二个：

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

对新创建的元素没有影响。这在文档中指定为“事件处理程序仅绑定到当前选定的元素;它们必须存在于代码调用.on（）时页面上。”

Answer 2

这与事件如何起泡有关。在第二行中，当事件冒泡到特定元素时，您实际上是在创建处理程序。新元素不会是此元素的子元素，因此事件不会冒泡到它。

如果要捕获新元素，请在初始选择器中使用父元素（例如document）。

jQuery on（），为什么“点击”另一个未连接的元素？

2 个答案: