在JavaScript中创建DOM元素时绑定ready事件

Question

我想知道是否可以在DOM加载时将已创建的项目绑定到已加载或已准备好的事件上。 我听说过live（），但它不是可点击的内容，而只是必须加载的项目。

谢谢你的帮助！

- Artusamak

Answer 1

我认为你最好的选择是使用load事件。

$('element').load(function(){
   alert('loaded');
});

本地化

var elem = document.getElementById('element_id');
elem.onload = function(){
   alert('loaded');
};

动态创建的另一个例子：

$('<img/>', {
   src:   '/images/myimage.png',
   load:  function(){
     alert('image loaded');
   }
}).appendTo(document.body);

- jAndy

Answer 2

如果您想要将创建项目的代码和加载事件处理的代码分开，可以尝试让动态创建的元素在窗口上触发自定义事件：

var myElement = $('<img/>', {
   src:   '/images/myimage.png'
}).appendTo(document.body);

$(window).trigger( {type: "myElementInit", myObject : myElement} );

通过在额外参数中添加一个指向本身的指针，您可以在jQuery(document).ready中设置一个单独的处理器来查找"myElementInit"窗口事件并从额外参数中获取元素的引用：

jQuery.('window').bind( "myElementInit", function(event){
  var theElement = event.myObject;
...
} );

- JJ Blumenfeld

---

如前所述，我的问题是我无法编辑父级项目。 - Artusamak

我不确定我理解了你的意思。你能贴一些代码片段吗？你说的“我从live()中听到了什么”是什么意思？ - JJ Blumenfeld

我无法发布一些代码。 1/ 我有一个脚本，当文档准备好时，无法添加一个div到dom中进行修改。 2/ 我的脚本正在向dom中添加另一个div，并且需要在1/中创建的div真正添加到DOM后才能创建。这清楚吗？ - Artusamak

Answer 3

您可以使用.on()事件的委托形式，如此处所述：

委托事件的优点在于它们可以处理稍后添加到文档中的后代元素的事件。通过选择在附加委派事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁地附加和删除事件处理程序。例如，这个元素可以是Model-View-Controller设计中视图的容器元素，或者如果事件处理程序想要监视文档中的所有冒泡事件，则可以是document。在加载任何其他HTML之前，document元素在文档的头部可用，因此可以安全地在那里附加事件而无需等待文档准备就绪。

- Sorin Comanescu