コンテナのクリックハンドラを使用した通常のリンク機能

Question

コンテナをクリックするとリンクを含むdivがありますが、いくつかのAJAX機能がありますが、divには通常どおり機能するリンクがありますクリックハンドラをトリガしません。

<div class="box"> 
    Lorem ipsum dolor sit amet... 
    <a href="/actions/something/">Edit</a> 
</div> 

$('.box').on('click', function() { 
    $.ajax({ 
     ... 
    }); 
}); 

ハンドラをコンテナ内の他のすべてのテキストに添付しますが、ボックスの背景をクリックするとハンドラが起動しません。

Answer 1

あなたは.boxイベントハンドラでクリックされた要素を検出し、必要なロジックを全て実行することができ、次のいずれか

$('.box').on('click', function(e) { 
    if (e.target.tagName !== 'A') { 
    $.ajax({ 
    // ... 
    }); 
    } 
}); 

または代わりに、あなたはに伝播するイベントを停止a要素の上に別のイベントハンドラを配置することができます.box：

$('.box a').click(function(e) { 
    e.stopPropagation(); 
});