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.
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');
Here's an example:
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');
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.
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.
If you are targetting modern browsers, you can use the MutationObserver
object to listen to DOM changes.