选择器何时存在的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!");
});

检查这个sn-p：

$('#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

祝你好运！