Alright, my issue is, I have created a jQuery plugin that binds a click, and mouseover event to the elements provided by the selector. Now, I need those events, to instead, be ".live" events, after a lot-a-bit of searching, I found 'a' solution located here
Which, the given solution is as follows..
(function($) {
$.fn.liveBindTest = function() {
return this.each(function() {
$(this).click(function(){
console.log('click');
return false;
});
});
};
})(jQuery);
$('a').live('click', function(){ $(this).liveBindTest(); });
Though, this doesn't make sense, as then the plugin wouldn't be binding the live click to the 'selectors' provided. On the other hand it 'would' bind a click event to the selector elements. (In this case, the anchor tags, and not specifically a dynamically provided by developer selector set)
The above example is simply taking a long route to bind a live click to all anchor elements. Which, works in the case that you need a specific element live binded for your plugin. But my plugin is based solely on the selectors provided by the end developer using the plugin. So this solution means each time the developer would either,
A. Need to manually bind each live event the PLUGIN needs, before they actually init the plugin. Sort of like this..
$('*:not(.complicatedSelectorHere)').live('click', function(){
$(this).liveBindTest();
});
or
B. They would need to go into the jQuery.plugin.js file, go to the bottom of the code, and modify the live events there. This would be an ugly way of doing things, and not vary portable at all, which is what is needed as well, portability.
So my end question, to make sure it is clear with everyone..
Question: How does one bind a LIVE
event to ALL
SELECTORS
provided to a plugin?
Please do no provide the obvious solution below, as it does not work...
(function($) {
$.fn.liveBindTest = function() {
return this.each(function() {
$(this).live('click', function(){
console.log('live clicked');
return false;
});
});
};
})(jQuery);
Every jQuery object has a selector
property, so just use that:
$.fn.liveBindTest = function () {
$(this.selector).live('click', function () {
console.log('live clicked');
return false;
});
});
Of course, in order for this to work, a selector of some sort has to be used, i.e:
// This will work
$('body').liveBindTest();
// This WON'T work
$(document.body).liveBindTest();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With