5

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);
1
  • Ohh, and using another plugin to accomplish this, doesn't sound right.. as this plugin is ment to be light, not packed full of useless tools supplied by another plugin.. so if someone can offer a solution where this can be done with JUST jQuery, that would be great.. kk, Thanks!
    – NinjaKC
    Jan 21, 2011 at 8:47

1 Answer 1

6

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();
5
  • Wow, thanks for the fast reply, didn't expect it to be that quick. Have you tested this theory? I have tried to do my live event like you did, though the thing I notice different is I am doing my live call within the "return this.each(function(){ }); which looks like the bottom most of the 3 above. I have tried your given example, both in the "return this.each" function, and outside of it (though I don't see why the location of the live call would be relevant, as long as it was in the function) Let me also point out that my original try was within the init method,
    – NinjaKC
    Jan 21, 2011 at 11:56
  • Which is setup like that of the jQuery Authoring Page, docs.jquery.com/Plugins/Authoring. I cant not seem to get your function to work. (My bad on double comment, the other one ran out of characters and I didn't realize it...)
    – NinjaKC
    Jan 21, 2011 at 11:57
  • Ohhh.... Ok I retract my previous comment, I have managed to get this to work, there was an error in syntax after I copied your code to my example plugin and tested.. The key seems to be to keep the live events within the main function of the plugin, cant put it in the ini method, or within the return this.each function.. which actually makes a little more sense to me.. Now I see where the issue was overall.. good to go, much appreciated! I would up this one for ya, but not kool enough on this site I guess ;P
    – NinjaKC
    Jan 21, 2011 at 12:06
  • @Ninja glad that it's working now. I don't really mind if you don't upvote the answer, but it would be good if you accepted it (the tick on the left), to keep with how stackoverflow works. It will also help you get more answers to your questions in the future ;)
    – David Tang
    Jan 21, 2011 at 12:21
  • Ohh, yes, ok that is what I was looking for anyway, I thought it was the upvote ;) I get it now... hehe much appreciated again :) I couldn't really find anything in regards to my issue on Google, so hopefully this will help someone down the road, as I always land at stackflow when trying to work things out and using google, hence finally getting the account.. hehe :)
    – NinjaKC
    Jan 21, 2011 at 15:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.