jQuery - запускать живое событие только один раз для каждого элемента на странице?

Question

Вот сценарий

$("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()?
    }
})

Вот немного фона

Настраиваемое событие от плагина с именем inview

Актуальная проблема здесь http://syndex.me

1. В двух словах, новые сообщения Tumblr бесконечно прокручиваются с помощью взломать javascript (единственный доступный для tumblr fyi.)
2. Плагин inview прослушивает новые сообщения, поступающие в область просмотра, если отображается верхняя часть изображения, оно делает его видимым.
3. Это вроде работает, но если вы проверите свою консоль на http: //.syndex.me, проверьте, как часто запускается событие
4. Может быть, я тоже привереда, и это нормально? Пожалуйста, дайте мне знать ваше профессиональное мнение. но в идеале я бы хотел прекратить делать то, что мне больше не нужно.

Некоторые вещи, которые я пробовал, не работали:

5. stopPropagation

6. .die ();

7. Некоторые решения через S.O. либо не работал, например В jQuery, есть ли способ привязать клик только один раз? или Использование .one () с .live () jQuery

Я очень удивлен, почему такой возможности еще нет. Конечно, событие .one () также необходимо для будущих элементов? # Justsayin

Спасибо.

Answer 1

Добавьте класс к элементу, когда событие произойдет, и событие будет происходить только с элементами, у которых этого класса нет.*

Answer 2

Как упоминал Кевин, вы можете сделать это, манипулируя селекторами CSS, но на самом деле вам не нужно использовать :not(). Вот альтернативный метод:

// Use an attribute selector like so. This will only select elements
// that have 'theImage' as their ONLY class. Adding another class to them
// will effectively disable the repeating calls from live()
$('div[class=theImage]').live('inview',function(event, visible, visiblePartX, visiblePartY) {
   if (visiblePartY=="top") {
      $(this).animate({ opacity: 1 });
      $(this).addClass('nolive');
      console.log("look just how many times this is firing")
   }
});

Я использовал реальный код с вашего сайта. Надеюсь, что все в порядке.

Answer 3

Это работает (см. скрипка ):

jQuery(function($) {
    $("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()?
            $(this).bind('customEvent', false);
        }
    });

    function doStuff() {
        window.alert('ran dostuff');
    };

    $('#content').append('<p>Here is a test</p>');

    $('p').trigger('customEvent', {one: true});
    $('p').trigger('customEvent', {one: true});
    $('p').trigger('customEvent', {one: true});
});

Это также должно работать для ваших нужд, хотя и не так красиво :)

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