6

jQuery 1.7+ の jQuery livequery プラグインに相当するものはありますか?

イベントを動的にバインドしようとしています。data-* 要素に基づいて DOM 要素がバインドする必要があるイベントを読み取ります。

<a href="#" class="js-test" data-events="click">Test 1</a>
<a href="#" class="js-test" data-events="mouseover">Test 2</a>
 .. etc ..

すべての要素をクラスにバインドしたいのですが、その属性.js-testにリストされているイベントにのみバインドします。data-events

jQuery.on/live/bind/delegate ではすべて、イベントをパラメーターとして渡す必要があります。

これは、ページ上に存在する DOM 要素に対して検出されますがdocument.ready、DOM (AJAX、JS など) を更新すると、クラス.js-testを持つ新しい要素にもイベントがバインドされます。

livequery プラグイン (古いもので、jQuery 1.3 から) は、セレクターと、セレクターに一致するものに対して実行する関数を必要とするため、これを許可しているようです。

4

1 に答える 1

14

jQuery 1.7 以降、onメソッドはlive メソッドに取って代わります。説明したようにセレクターを渡したり一致させたりする簡単な方法はありませんがdata-events、データイベントの値がそのイベントと一致する限り、イベントタイプの代わりに動的な値を渡すことでこれを実現できます.

ただし、on メソッドのイベント パラメータ (最初のパラメータ) に渡される引数は、一致した要素のセット内の各要素の各 data-events 属性から取得されるため、一致した要素のコレクションをループする必要があります。各要素の個々の data-events 属性値に個別にアクセスします。

$('.js-test').each(function() { 
    $(this).on( $(this).attr("data-events"), function() {

        // event pulled from data-events attribute           
        alert("hello - this event was triggered by the " + $(this).attr("data-events") + " action.");

    });
});

すべてのイベントを同じ関数にマップしたいのですが、異なるイベントが異なる DOM 要素の関数呼び出しをトリガーするようにします。

すべてのイベントを 1 つの関数にマップする必要があるため、このソリューションは特定の要件を満たし、問題を解決します。

ただし、要件が変化し、各イベント タイプに一致するように関数イベントのコレクションをマップする必要があることがわかった場合は、次の手順を開始する必要があります。

var eventFnArray = [];
eventFnArray["click"] = function() { 
    alert("click event fired - do xyz here");
    // do xyz
};
eventFnArray["mouseover"] = function() { 
    alert("mouseover fired - do abc here"); 
    // do abc
};

$('.js-test').each( (function(fn) { 

   return function() {   
     $(this).on( $(this).attr("data-events"), function() {

        alert("hello - this is the " + $(this).attr("data-events") + " event");

        // delegate to the correct event handler based on the event type
        fn[ $(this).attr("data-events") ]();

     });
   }
})(eventFnArray)); // pass function array into closure

アップデート：

これはテスト済みで、div#container に追加された新しい要素に対して実際に機能します。問題は、onメソッドが機能する方法にありました。の委任の性質はon、親要素がセレクターに含まれている場合にのみ機能し、セレクターが 2 番目のパラメーターに渡された場合にのみ機能します。これは、data-events 属性によってターゲット要素をフィルター処理します。

HTML:

<div id="container">
    <a href="#" class="js-test" data-events="click">Test 1</a>
    <a href="#" class="js-test" data-events="mouseover">Test 2</a>
</div>

JavaScript:

$(document).ready(function() {
  $('.js-test').each(function() { 
      var _that = this;
      alert($(_that).attr("data-events"));

      $(this).parent().on(
          $(_that).attr("data-events"), 
              '.js-test[data-events="'+ $(_that).attr("data-events") +'"]', 
              function() {

                  // event pulled from data-events attribute           
                  alert("hello - this event was triggered by the " + $(_that).attr("data-events") + " action.");
              }
          );
      }
  ); 
});

さらに、次の jQuery を使用して項目をコンテナーに追加し、テストします。

$('#container')
    .append("<a href='#' class='js-test' data-events='mouseover'>Test 3</a>");

やってみて：

これは、テスト済みで機能する機能を示すjsfiddleです。

于 2012-05-26T23:27:50.750 に答える