jQuery.click之前的jQuery.on（'click'）？ [英] jQuery.on('click') before jQuery.click?

问题描述

我有一个外部脚本，我无法修改。这个脚本加载一个按钮，并在其上添加一个jQuery .click ...它以return false结束。

I have an external script, wich i can't modify. This script load a button, and add a jQuery .click on it... and it finish with "return false".

我需要触发我自己的代码单击。当我加载页面时，不存在，所以我需要使用.on（'click'）绑定live。但是看起来.on（'click'）在.click之后加载并且当他使用return false时，我的.on（'click'）没有加载。

I need to trigger my own code on this click. When i load the page the doesn't exists, so i need to use .on('click') to bind "live". But it looks like the .on('click') is loaded "after" the .click and as he use "return false", my .on('click') is not loaded.

所以问题是......我如何触发我点击这个动态加载的＃btn已经有一个.click函数返回false？

So the question is... How can i trigger my on click on this dynamically loaded a#btn wich already has a .click function returning 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事件远程脚本。

As you can the, the objective is to trigger a Google Analytics event on a link button loaded by a distant script.

推荐答案

您似乎面临着多个问题，但更重要的是要知道元素何时被渲染在DOM中，你可以操作它的事件集合。

It seems that you are facing multiple issues, but the more important one would be knowing when the element is rendered in the DOM so that you can manipulate it's events collection.

一旦元素可以访问，解绑插件的处理程序，绑定你的并重新绑定插件就很简单了可以访问jQuery的事件集合，如：$ ._ data（domEl，'events'）;

Once the element is accessible, it's quite simple to unbind the plugin's handlers, bind yours and rebind the plugin's one knowing that the jQuery's event collection can be accessed like: $._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级事件模型并执行：

If you do not want to unbind, I believe that you can also use the DOM level 0 event model and do:

element.onclick = yourHandler;

知道，如果插件呈现此元素，则知道元素何时可用更多问题异步并且不提供了解进程何时完成的方法。

Know, to know when the element is available is much more of an issue if the plugin renders this element asynchronously and doesn't provide a way to know when the process is complete.

如果你想支持旧的浏览器，除了覆盖插件之外别无选择。代码（假设有关方法是公共的）或使用 setInterval 轮询DOM，直到您要查找的元素是DOM的一部分，然后您可以执行我们上面讨论的内容。

If you want to support old browsers, you will have no other choice than either override the plugin's code (assuming the concerned methods are public) or poll the DOM with setInterval until the element you were looking for is part of the DOM and then you can do what we discussed above.

如果您要定位现代浏览器，可以使用 MutationObserver 对象，用于侦听DOM更改。

If you are targetting modern browsers, you can use the MutationObserver object to listen to DOM changes.

这篇关于jQuery.click之前的jQuery.on（'click'）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！