在javascript dom元素创建上绑定就绪事件
我想知道在加载dom时是否可以在脚本创建的项目上绑定已加载或就绪事件。 我从live()听到但它不是可点击的东西,它只是一个必须加载的项目。
谢谢你的帮助!
我想你最好的镜头是那里的load
事件。
$('element').load(function(){ alert('loaded'); });
本地人
var elem = document.getElementById('element_id'); elem.onload = function(){ alert('loaded'); };
动态创建的另一个例子:
$('', { src: '/images/myimage.png', load: function(){ alert('image loaded'); } }).appendTo(document.body);
如果您希望能够分离用于创建项目和加载事件处理的代码片段,您可以尝试让动态创建的元素在窗口上触发自定义事件:
var myElement = $('', { 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; ... } );
您可以使用.on()
事件的委托forms,如下.on()
:
委托事件的优点是,它们可以处理来自稍后添加到文档的后代元素的事件。 通过选择在附加委托事件处理程序时保证存在的元素,您可以使用委派事件来避免频繁附加和删除事件处理程序。 例如,此元素可以是模型 – 视图 – 控制器设计中视图的容器元素,如果事件处理程序想要监视文档中的所有冒泡事件,则可以是文档。 在加载任何其他HTML之前,
document
元素在文档的头部可用,因此可以安全地将事件附加到那里而无需等待文档准备就绪。