在前端开发中，动态创建元素是很常见的需求，而jQuery提供了方便的方法用于创建和添加元素到DOM树中。但是，有时候我们需要在元素被创建后马上执行一些操作，比如绑定事件、修改CSS属性等。这时候，我们可以使用jQuery的“创建”事件来实现。
创建事件介绍
jQuery的“创建”事件是一个自定义事件，当新元素通过jQuery被创建并添加到DOM中时，就会触发该事件。这个事件可以通过on()方法来绑定，其语法如下：
$(document).on('DOMNodeInserted', selector, function() {
// code to execute when new element is created
});其中，selector参数指定了要监听的元素选择器，如果不指定，则默认监听整个文档。需要注意的是，由于“创建”事件是异步的，所以在事件处理函数中，可能需要使用setTimeout()等方法进行延迟处理。
使用场景
- 绑定事件
当新元素被创建并添加到DOM中时，我们经常需要在它上面绑定事件。如果直接在创建元素后立即绑定事件，有可能会因为元素还没有被完全添加到DOM中而导致绑定失败。而使用“创建”事件则可以避免这个问题，因为该事件只有在元素被完全添加到DOM中后才会被触发。
$(document).on('DOMNodeInserted', '.my-elem', function() {
$(this).click(function() {
// code to execute when element is clicked
});
});- 修改CSS属性
如果我们需要在元素被创建后立即修改其CSS属性，也可以使用“创建”事件来实现。因为在元素被添加到DOM前修改其CSS属性是无效的，只有在元素被完全添加到DOM中后才能起作用。
$(document).on('DOMNodeInserted', '.my-elem', function() {
$(this).css('color', 'red');
});示例代码
下面是一个使用“创建”事件的示例代码，该代码会创建一个新的<div>元素，并在其被添加到DOM后立即修改其CSS属性和绑定点击事件。
-- -------------------- ---- -------
--------- -----
------
------
------------- ------ ----- ------------
------- -----------------------------------------------------------
--------
------------ -
------- --------------------- -----------------------------
--------------------------------- ----------- ---------- -
-------------------- -------
------------------------ -
---------- ------- ------
---
---
---
---------
-------
------
-------
-------总结
“创建”事件可以方便地帮助我们在动态创建元素后立即执行一些操作，比如绑定事件、修改CSS属性等。需要注意的是，在处理“创建”事件时，有些操作可能需要使用setTimeout()等方法进行延迟处理，以确保元素被完全添加到DOM中后再进行操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14532