Question

这段代码的作用是创建一个段落，其中包含#paragraph的值，这是一个textarea标签，它完全正常。

$('#insert_paragraph').click(function(){
  var text = $('#paragraph').val();
  $('#container').append('<p>'+text+'</p>');
});

这段代码只是为点击的p标签添加了一个类，但是它只将这个类添加到第一次呈现页面时创建的p元素，而不是使用上面的代码创建的p元素。 / p>

$('p').click(function(){
  $(this).addClass('box');
});

Answer 1

执行$('p')时，jQuery会在该时间点找到存在的<{1}}元素。所以你只是把一个处理程序挂钩给那些，而不是以后添加的其他人。

您可以使用事件委派来监视祖先元素的点击，然后检查它们是否与选择器匹配。例如，文档上的以下挂钩p只会在点击通过click元素时触发，因此在创建p元素时不关心（不提供任何内容）其他人把事件搞得更高，并阻止它冒泡）：

Answer 2

T.J完全正确。您将事件绑定到所有现有段落。之后，创建的任何其他段落标记都不会绑定任何事件。

下面的代码组合了您的事件，在添加段落后立即绑定段落点击事件。您仍然需要在页面加载后绑定所有现有段落。

$('#insert_paragraph').click(function(){
    var text = $('#paragraph').val();
    $('#container').append('<p>'+text+'</p>');

     //Bind Event to last paragraph (the one just added)
     $('#container p:last-child').click(function(){
         $(this).addClass('box');
     });
});

为什么.click（）事件不会触发在页面呈现后创建的元素？ JQuery的

2 个答案: