Question

假设我想要更改所创建的任何新特定DOM元素的文本。 E.g：

（不是真正的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/

CustomEvent - https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent

祝你好运！

选择器何时出现的jQuery事件委托？

1 个答案: