2

新しく作成された特定の DOM 要素のテキストを変更したいとしましょう。例えば：

（本当のAPIではありません、私は理解しています）

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

したがって、プログラムで作成<p class="change-this">して DOM に (jQuery などを介して) 追加すると、上記が起動します。これはjQueryができることですか？私が考えることができるのは、プログラムで HTML を追加して$.trigger('creation')、これらのイベントを処理するハンドラーを用意することだけです。

4

1 に答える 1

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

幸運を！

于 2014-11-23T21:11:51.747 に答える