Question

Here’s the scenario

$("p").live('customEvent', function (event, chkSomething){ 
//this particular custom event works with live
    if(chkSomething){
        doStuff();
        // BUT only per element
        // So almost like a .one(), but on an elemental basis, and .live()?
    }
})

Here’s some background

The custom event is from a plugin called inview

The actual issue is here http://syndex.me

1. In a nutshell, new tumblr posts are being infnitely scrolled via
   javascript hack (the only one out there for tumblr fyi.)
2. The inview plugin listens for new posts to come into the viewport, if the top of an image is shown, it makes it visible.
3. It’s kinda working, but if you check your console at http://.syndex.me check how often the event is being fired
4. Maybe i’m also being to fussy and this is ok? Please let me know your professional opinion. but ideally i’d like it to stop doing something i dont need anymore.

Some things I’ve tried that did not work:

5. stopPropagation

6. .die();

7. Some solutions via S.O. didnt work either eg In jQuery, is there any way to only bind a click once? or Using .one() with .live() jQuery

I’m pretty surprised as to why such an option isnt out there yet. Surely the .one() event is also needed for future elements too? #justsayin

Thanks.

Answer 1

Add a class to the element when the event happens, and only have the event happen on elements that don’t have that class.

$("p:not(.nolive)").live(event,function(){
  $(this).addClass("nolive");
  dostuff();
});

Edit: Example from comments:

$("p").live(event,function(){
  var $this = $(this);
  if ($this.data("live")) {
    return;
  }
  $this.data("live",true);
  doStuff();
});