我有一个包含自定义 jQuery 事件处理程序的远程 javascript 文件。当它作为 <script src='...'></script>
插入到 DOM 中时元素,自定义事件处理程序未注册。
但是,如果我添加与直接 JS ( <script>...</script>
) 完全相同的脚本,事件处理程序将被注册,并且一切都会按预期执行。
当脚本作为远程文件插入时,为什么不在 jQuery 中绑定(bind)事件处理程序?
例子
包含自定义事件处理程序的远程文件:
console.log('Before custom event handler');
$('button').on('customEvent', function(){
console.log('customEvent Caught');
});
https://gist.github.com/2767385
将脚本插入 DOM 的(非工作)javascript:
var scriptNode = document.createElement('script');
scriptNode.src = 'https://gist.github.com/raw/2767385/b9ddea612ff60b334bd2430e59903174e527a3b5/gistfile1.js';
document.body.appendChild(scriptNode);
将脚本作为内联插入到 DOM 中的(替代方案)javascript:
var scriptText = "console.log('Before custom event handler'); $('button').on('customEvent', function(){ console.log('customEvent Caught'); });",
scriptNode = document.createElement('script');
scriptNode.appendChild(document.createTextNode(scriptText));
document.body.appendChild(scriptNode);
触发事件:
$('button').triggerHandler('customEvent');
正确读取JS,正确执行handler
JSFiddles
远程文件 - 非工作示例:http://jsfiddle.net/3CfFM/3/
使用文本 - 替代方案:http://jsfiddle.net/3CfFM/2/
发生了什么?
当脚本作为远程文件插入时,为什么不在 jQuery 中绑定(bind)事件处理程序?
最佳答案
你错了。当与远程脚本一起使用时,事件处理程序被绑定(bind);它只是需要更长的时间。浏览器在绑定(bind)处理程序之前需要发出 HTTP 请求。这意味着您使用 triggerHandler('customEvent')
触发的原始事件不会被捕获,因为它的冒泡和捕获已经完成。
如果稍等片刻,然后再次单击该按钮,您将看到事件处理程序确实已被绑定(bind)。您还可以通过延迟 triggerHandler
调用直到脚本加载来看到这一点:
$('button').click(function() {
var scriptNode = document.createElement('script');
scriptNode.src = 'https://gist.github.com/raw/2767385/897cffca74411dbb542c0713bacb5a4048d6708b/gistfile1.js';
scriptNode.onload = function() {
$('button').triggerHandler('customEvent');
};
document.body.appendChild(scriptNode);
});
关于javascript - 当脚本插入 DOM 时,jQuery .on() 未绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10698177/