要素が一致しないjQueryセレクタ

Question

私は今、少し頭痛を引き起こしているjQueryをいくつか持っています。それはセレクタがどのように動作しているかに至ります。

私はの形でいくつかのHTML持っている：私のナビゲーションの一部からたくさんのアンカータグが含まれてい

<div id="master"> 
    <div class="row"> 
     <div class="medium-6 columns"> 
      <div class="medium-6 right columns"> 
       <div class="pagerContent"> 
        <div class="pagination"> 
         <div class="page"> 
          <ul> 
           <li> 
            <a href="#"> 
          ...... 
etc. 

を。

次のjQueryを使用している場合。

$('#master').on('click', '.pagination a', function (event) { 

    -- code -- 

}); 

それは動作しますが、私は

$(".pagination a", "#master").on('click', function (event) { 

    -- code -- 

}); 

を使用する場合、それはしていません。

Answer 1

こんにちは、みなさんありがとうございます。私はまだこれを動作させることが困難だったので、私は私のために働く別の方法を試みました。リンクタグのそれぞれについて

、私はそう

<a href="#"></a> 

は、私が今までできています

$(document).on("click", "myFirstLink", function (event) { 
     alert("Hi," + event.target.href + " clicked"); 
    }); 

を使用して、その後 ​​3210

なった識別子として特定のクラスを定義していますリンクを処理します。

Answer 2

あなたの2つの例は微妙に異なります。

これは、遅延イベント処理を使用します。

$('#master').on('click', '.pagination a', function (event) { 

    -- code -- 

}); 

本質clickがセレクタ.pagination aがクリックされた要素にマッチさ#masterのみ火災によって処理されます。 DOMロード後に子/子孫が動的にページに追加されると、この方法で動作します。

この、ない：

$(".pagination a", "#master").on('click', function (event) { 

    -- code -- 

}); 

それは「.pagination aに一致#masterの子孫」に直接clickイベントを付加しようなハンドラが取り付けられたときの要素がDOMに存在することを必要とします。