Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery.live() on plugin selector elements

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);
like image 706
NinjaKC Avatar asked Jan 21 '11 08:01

NinjaKC


1 Answers

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();
like image 93
David Tang Avatar answered Oct 23 '22 22:10

David Tang