0

这段代码所做的是创建一个段落，无论#paragraph 的值是什么，它都是一个文本区域标签，它工作得非常好。

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

这段代码只是将一个类添加到单击的任何 p 标记中，但是它仅将此类添加到第一次呈现页面时创建的 p 元素，而不是使用上面的代码创建的 p 元素。

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

2 回答 2

4

当您这样做时$('p')，jQuery 会立即找出p存在于该时间点的元素。因此，您仅将处理程序连接到那些，而不是稍后添加的其他处理程序。

您可以使用事件委托，它监视对祖先元素的点击，然后检查它们是否与选择器匹配。例如，click文档上的以下钩子，但仅在单击通过p元素时触发，因此它不关心p元素何时创建（假设没有其他任何东西将事件挂钩并阻止它冒泡）：

$(document).on('click', 'p', function(){
//^             ^        ^ --- the selector to filter against
//|             +--- the event to hook
//+--- the element to hook it on
  $(this).addClass('box');
});
于 2013-05-06T21:45:33.560 回答
1

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

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

$('#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');
     });
});
于 2013-05-06T22:10:48.857 回答