JQuery .on（）ネストされたクリックイベント

Question

ある情報を取得する部分をレンダリングするAJAX呼び出しを起動する非常に複雑なフォームがあります。

私はボタンのように動作する要素に.on（ 'click'）イベントをバインドする特定のシナリオで壁に当たっています。問題は、この要素が、部分リフレッシュ中にも破棄される他の要素の中に深く入れ子になっていることです。次に、HTMLの例を示します。

<div id="locations_grid"><%= render 'table' %> 

と部分のため：

<fieldset> 
    <legend>List</legend> 
    <div class="lists> 
    <div class="project_list"> 
     <div id="pagination_link"> 
     <a class="more"> 
      More records 
     </a> 
     </div> 
    </div> 
    </div> 
</fieldset> 

私の例から、私はdiv要素の配置やフィールドセットにネストされたクラス「より」、に「クリック」イベントをバインドしたいです。

$('#locations_grid').on('click','.more', function(){ 
    //do something 
}); 

：「location_gridは」HTMLをレンダリングするよう見て、これは部分的にはので、私の最初の試みだったrefreshed-された後、それが破壊されることはありませんよう見て、.on（）イベントのためのアンカーポイントになります

しかし、 ".more"は "#locations_grid"の直下の子ではないため、（私の理解では）これはうまくいかないと思っていました。だから私の試みは、これまでの様々な組み合わせされています：

$('#locations_grid').on('click','fieldset .lists .project_list #pagination_link .more', function(){ 
    //do something 
}); 

はしかし、どれも成功し、「.more」クラスにクリックイベントを結合しているように見えるん。

誰かが私が逃しているものについて何か考えているなら、助けがうまく受け入れられるでしょう！私はそれはあなたがこれを試すことができ

Answer 1

解決済みの問題は、Ruby on RailsアセットパイプラインがJavaScriptファイルをロードしていないために問題となりました。

明確にするために、私の最初の実装は正しいものでした。

$('#locations_grid').on('click','.more', function(){ 
    //do something 
}); 

Answer 2

。

$('div').has(".more").on('click','.more', function(){ 
    //do something; 
    }); 

Answer 3

、それは「」より多くのクラスを持つすべてのクリックリスナを適用する作業になると思うのコード

$('body').on('click','fieldset .lists .project_list #pagination_link .more', function(){ 
     //do something 
    }); 

or 

    $('body').on('click','.more', function(){ 
     //do something 
    }); 

以下のように使用することができます みんなありがとう、