jQuery - ライブイベントをページ上の要素ごとに1回だけトリガーしますか?

シナリオは次のとおりです

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

ここにいくつかの背景があります

The custom event is from a plugin called inview

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

  1. 一言で言えば、新しいtumblrの投稿は経由で無制限にスクロールされています javascript hack(tumblr fyi用の唯一のもの)
  2. インビュープラグインは、画像の上端が表示されている場合は、ビューポートに入る新しい投稿を待ち受けます。
  3. ちょっとしたことですが、 http://.syndex.me であなたのコンソールをチェックするとイベントが発生しています。
  4. たぶん私も騒がしくなりましたが、これは大丈夫ですか?あなたの専門家の意見をお知らせください。しかし、理想的には、私がもう必要としない何かをやめることをやめたいのです。

試したことのあるもの:

  1. stopPropagation

  2. .die();

  3. S.O.たとえば、 jQueryでは、 または .one()を使用する方法はありますか? live()jQuery

私はかなりそのようなオプションがまだそこにない理由としてかなり驚いています。確かに将来の要素にも.one()イベントが必要ですか? #言ってるだけ

ありがとう。

1

3 答え

イベントが発生したときに要素にクラスを追加し、そのクラスを持たない要素に対してのみイベントが発生するようにします。

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

編集:コメントの例:

$("p").live(event,function(){
  var $this = $(this);
  if ($this.data("live")) {
    return;
  }
  $this.data("live",true);
  doStuff();
});
2
追加された
素晴らしいアイデアKevin;確かに機能:)私は、データオブジェクトのためにCSSタグを使用することを躊躇し始めました。私は本当にCSS宣言を再利用するのはあまり好きではありません。なぜなら、 'nolive'(この例では)がスタイルシートに終わった場合、私たちは困ってしまうかもしれません。思考の糧。
追加された 著者 Kato,
真実、真実...プログラミングはすべてトレードオフです。そうではありませんか? :)
追加された 著者 Kato,
$ this = $(これ)は何のために必要ですか?
追加された 著者 RGBK,
ヒントありがとう。ここで√を選ぶことは難しいです、彼らはすべて良いです。私は2つのオプションがあるので、これを選んだ。私は最後の24時間であなたが正しい質問を定式化するために作成した何dud SOの投稿を知りません。皆さんに感謝します。
追加された 著者 RGBK,
データオブジェクトの使用に関する唯一の問題は、このような単純なセレクタを使用してフィルタリングすることができないことです。あなたはあなたのようなifステートメントだけを持つことになります。私は例を挙げます。
追加された 著者 Kevin B,
$(this)を複数回使用しているので、必要な処理を減らすためにキャッシュしました。それは必須ではなく、このケースでは違いはありません。同じ選択を2回以上使用するたびに私がやっていたことです。
追加された 著者 Kevin B,

これは動作します(フィドルを参照):

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('

Here is a test

'); $('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);
    }
})
1
追加された

Kevinが述べたように、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")
   }
});

私はあなたのサイトから実際のコードを使用しました。希望は大丈夫だった。

1
追加された