jQuery 事件委托，用于选择器何时出现

Question

假设我想更改创建的任何新特定 DOM 元素的文本。 例如：

（不是真正的API，我意识到）

$('body').on('creation', '.change-this', function() {
  $(this).text('Boom!');
});

因此，如果我以编程方式创建<p class="change-this">并将其添加到 DOM（通过 jQuery 或其他方式），上述内容就会触发。这是jQuery可以做的事情吗？我能想到的就是，当我以编程方式添加任何 HTML 时，执行$.trigger('creation')并让一个处理程序准备好处理这些事件。

Answer 1

您想跟踪您的全新项目吗？您可以使用自定义事件执行此操作。由于您使用的是 jQuery，因此您可以使用 .trigger() 方法创建事件。

例如，每次创建元素时都需要触发事件。因此，在您的代码中，您将添加如下内容：

... // Your code goes here
new_item = '<p class="change-this">'; // The DOM that you will inject
container.append(new_item); // Injecting item into DOM
container.trigger('creation', []); // Firing a event signaling that a new item was created
...

然后，您将为此自定义事件创建一个侦听器：

container.on('creation', function() {
    console.log("Yay! New item added to container!");
});

检查此代码段：

$('#add').on('click', function() {
  var item = '<p>New item</p>',
      container = $('#container');
  
  container.append(item);
  container.trigger('creation');
});
$('#container').on('creation', function () {
  var new_message = 'New Item added!<br>';
  
  $('#message').append(new_message);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">add</button>
<b id="message"></b>
<div id="container"></div>

请记住，如果要使用自定义轨道跟踪元素，则只需创建不同的自定义事件并处理其触发器即可。

jQuery为我们提供了一种简单而美观的方式来处理自定义事件。棒！

欲了解更多信息，您可以查看以下链接：jQuery.trigger（） -http://api.jquery.com/trigger/

自定义事件简介 -http://learn.jquery.com/events/introduction-to-custom-events/

自定义事件 -https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent

祝你好运！