当脚本插入DOM时，jQuery .on（）不会绑定 [英] jQuery .on() not bound when script inserted into the DOM

问题描述

我有一个包含自定义jQuery事件处理程序的远程javascript文件。当这被插入DOM作为< script src ='...'>< / script> 元素时，自定义事件处理程序未注册。 / p>

但是，如果我将直接的JS（< script> ...< / script> ），事件处理程序被注册，并且一切按预期执行。

为什么当脚本作为远程插入时，jQuery中绑定的事件处理程序不是文件？

示例

包含自定义事件处理程序的远程文件：

  console.log（'自定义事件处理程序之前'）; 
 $（'button'）。on（'customEvent'，function（）{
 console.log（'customEvent Caught'）; 
}）; 
  

https://gist.github.com/2767385

插入脚本的（非工作）javascript进入DOM：

  var scriptNode = document.createElement（'script'）; 
 scriptNode.src ='https://gist.github.com/raw/2767385/b9ddea612ff60b334bd2430e59903174e527a3b5/gistfile1.js'; 
 document.body.appendChild（scriptNode）; 
  

（工作替代方案）javascript将脚本插入到DOM：

  var scriptText =console.log（'custom custom 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正确读取，处理程序正确执行。

JSFiddles

远程文件 - 非工作示例： http://jsfiddle.net/3CfFM/3/

使用文本 - 工作方式： http://jsfiddle.net/3CfFM/2/

当脚本作为远程文件插入时，为什么jQuery中没有绑定事件处理程序？

解决方案

你错了。当与远程脚本一起使用时，事件处理程序 被绑定;它只需要一点时间。浏览器需要在绑定处理程序之前发出HTTP请求。这意味着您触发的原始​​事件（ triggerHandler（'customEvent'）未被捕获，因为它的冒泡和捕获已经完成。

如果等待一秒，然后再次单击该按钮，您将看到事件处理程序确实已被绑定。您也可以通过延迟您的 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）; 
}）; 
  

http://jsfiddle.net/3CfFM/4/

I have a remote javascript file containing a custom jQuery event handler. When this is inserted into the DOM as a <script src='...'></script> element, the custom event handler is not registered.

However, if I add the exact same script as straight JS (<script>...</script>), the event handler is registered, and everything executes as expected.

Why isn't the event handler being bound in jQuery when the script is inserted as a remote file?

Example

The remote file, containing the custom event handler:

console.log('Before custom event handler');
$('button').on('customEvent', function(){
    console.log('customEvent Caught');
});

https://gist.github.com/2767385

The (non-working) javascript which inserts the script into the DOM:

var scriptNode = document.createElement('script');
    scriptNode.src = 'https://gist.github.com/raw/2767385/b9ddea612ff60b334bd2430e59903174e527a3b5/gistfile1.js';
document.body.appendChild(scriptNode);

The (working alternative) javascript which inserts the script as inline into the DOM:

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);

Triggering the event:

$('button').triggerHandler('customEvent');

The JS is correctly read, and the handler is correctly executed.

JSFiddles

Remote file - non-working example: http://jsfiddle.net/3CfFM/3/
Using Text - working alternative: http://jsfiddle.net/3CfFM/2/

What's happening?

Why isn't the event handler being bound in jQuery when the script is inserted as a remote file?

解决方案

You're mistaken. The event handler is being bound when used with a remote script; it simply takes a little longer. The browser needs to make an HTTP request before it binds the handler. This means that the original event you trigger with triggerHandler('customEvent') is not captured, since its bubbling and capturing has already completed.

If you wait a second, then click the button again, you will see that the event handler has indeed been bound. You can also see this by delaying your triggerHandler call until the script has loaded:

$('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);
});

http://jsfiddle.net/3CfFM/4/

这篇关于当脚本插入DOM时，jQuery .on（）不会绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！