我有一个外部脚本,我无法修改.这个脚本加载一个按钮,并在其上添加一个jQuery .click …它以“return false”结束.
我需要在这次点击时触发我自己的代码.当我加载页面时,不存在,所以我需要使用.on(‘click’)来绑定“live”.但看起来.on(‘click’)在“.click之后”加载,并且当他使用“return false”时,我的.on(‘click’)没有被加载.
所以问题是……如何触发我点击这个动态加载的#btn已经有一个.click函数返回false？
这是小提琴：
http://jsfiddle.net/PLpqU/
这里有一个代码示例：
<div id="container"></div>
// I want this action to be executed on click,and the other too
// I can't use .click because on the "real" code,the a#btn is loaded after the page by another script
jQuery(document).on('click','a#btn',function(){
ga('send','event',{ eventCategory: 'xxxx',eventAction: 'yyyy' });
}) ;
// http://www.xxxxxx.com/distant-script.js
// This one is binded in a script that i cannot edit :
// Just before it load a#btn on the page,and then bind .click on it
// as he return false,the other on('click') are not executed
jQuery('#container').append('<a id="btn" />') ;
jQuery('a#btn').click(function(){
// Some code stuff i need to be executed,but i can't manage
return false ;
}) ;
尽可能地,目标是在由远程脚本加载的链接按钮上触发Google Analytics事件.
解决方法
您似乎面临着多个问题,但更重要的是知道何时在DOM中呈现元素以便您可以操纵它的事件集合.
一旦元素可访问,解开插件的处理程序,绑定你的并重新绑定插件就知道可以访问jQuery的事件集合就很简单：$._ data(domEl,’events’);
这是一个例子：
var $div = $('<div>').click(function () { console.log('plugin'); return false; }),clickListener = jQuery._data($div[0],'events').click[0];
//unbind all
$div.off('click');
//bind yours
$div.click(function () { console.log('yours'); });
//rebind the plugin's one
//note that I do not register the listener by honoring the same configs,//but you could since you can see them in the clickListener object
$div.click(clickListener.handler);
//test out everyting
$div.triggerHandler('click');
如果你不想解除绑定,我相信你也可以使用DOM 0级事件模型并执行：
element.onclick = yourHandler;
知道,如果插件以异步方式呈现此元素并且不提供了解过程何时完成的方法,则知道元素何时可用更成问题.
如果你想支持旧的浏览器,除了覆盖插件的代码(假设有关方法是公共的)或者用setInterval轮询DOM,直到你要查找的元素是DOM的一部分然后你可以做我们上面讨论的.
如果您要定位现代浏览器,则可以使用MutationObserver对象来侦听DOM更改.
