将jQuery样式（.toggleClass）应用于新添加的DOM元素

Question

所以，我正在一个有一个小小的记事本＆＃34;的网页上工作。小部件，我已经更新了界面，工作如下：

1. 记事本实际上只是一个样式<ul>，记事本页面上的每一行都是<li>。
2. 用户只需点击并输入即可添加新的<li>，因为它是contenteditable: true。
3. 每个新添加的行都放在<p>元素中，并使用jQuery进行样式设置。

现在这里是我的jQuery问题......下面的代码成功添加了＆＃34;删除线＆＃34;双击时将类加到<p>元素，然后再次双击时将其删除。 HOWEVER ，如果我点击＆＃34;记事本＆＃34;要添加新的<p>元素，下面的jQuery脚本不起作用。它仅适用于第一次加载文档时页面上已有的<p>个元素。

// NOTEPAD INTERFACE
$(".paper p").dblclick( function() {
  $(this).toggleClass("strikethrough");
});

是否有人知道如何使相同的jQuery同样适用于每个<p>元素，无论它何时被添加到DOM？

Answer 1

您需要使用.delegate()。这将使您的函数应用于每个元素，甚至是新创建的元素：

$(".paper").delegate('p', 'dblclick', function() {
  $(this).toggleClass("strikethrough");
});

Here's the documentation for delegate