jQuery 动态创建元素的事件”on create”

在本文中，我们将介绍如何使用jQuery来给动态创建的元素绑定事件。

什么是动态创建的元素？

动态创建的元素是指在页面加载完成后，在运行时通过JavaScript添加到DOM中的元素。常见的动态创建元素的方法包括通过innerHTML、createElement或通过AJAX获取数据后创建元素等。

使用`.on()`方法绑定事件

我们可以使用jQuery的.on()方法将事件绑定到动态创建的元素上。.on()方法是jQuery中用于事件委托的函数，它可以将事件处理程序绑定到当前或未来的元素上。

$(document).on('click', '.dynamic-element', function(){
  // 事件处理程序
});

在上面的示例中，我们通过$(document)选取了整个文档对象作为绑定事件的目标，但实际上你也可以使用父级元素或其他符合选择器的元素作为目标。.dynamic-element是一个CSS选择器，用于指定目标元素的类名或标签名。

使用这种方式绑定事件，就可以在动态创建的元素出现在DOM中时触发相应的事件处理程序。

示例

我们通过一个示例来说明如何使用.on()方法为动态创建的元素绑定点击事件。

<button id="add-element">添加元素</button>
<div id="container"></div>

$(document).ready(function(){
  $('#add-element').click(function(){
    var newElement = $('<div class="dynamic-element">动态创建的元素</div>');
    $('#container').append(newElement);
  });

  $(document).on('click', '.dynamic-element', function(){
    alert('你点击了动态创建的元素');
  });
});