jQueryのネストされたクリックイベント

Question

私は、次のマークアップがあります。以下のように2つの異なるクリックイベントと

<div data-href="http://www.xxxxxxxxxxxxx.com/xxxxxxxx.php/Mediterranean-Youth-Hostel/Barcelona/6053" data-id="6053" class="property-wrapper row"> 
    <div class="columns large-4 medium-4">v 
     <img class="recent-viewed-img" src="http://ucd.xxxxxxxxx.com/propertyimages/6/6053/107.jpg" alt=""> 
    </div> 
    <div class="columns large-8 medium-8"> 
     <div class="info"> 
      <span class="city">Barcelona</span> 
      <span class="close right">x</span> 
     </div> 
     <span class="hostel-title">Mediterranean Youth Hostel</span> 
     <div class="rating"> 
      <span class="number">9.1</span> 
      <span class="text">Fabulous</span> 
     </div> 
     <div class="bottom-info"> 
      <span class="price-from">From €9.90</span> 
      <div class="icon_freewifi right"> 
       <i class="fa fa-wifi"></i>Free WiFi 
      </div> 
     </div> 
    </div> 
</div> 

と2 JSの機能を：

この1つはあなたがすべての行をクリックしてanoterにあなたを取ることができますページ：

$('.property-wrapper .columns').on('click', function(){ 
    window.location.href = $(this).parent().data('href'); 
}); 

この1つは、単にあなただけをクリック行閉じて削除します。

を

問題は、.close.rightにあると他のページにも行きます。

2つのクリックイベントが競合しています。

私はマークアップを編集することができ、私の周り「」ラッパーが、そのdidntの作業のいずれか..あなたが.property-wrapper .columnsにバインドclickハンドラの内部event.targetをチェックする必要があり、それはだ場合

Answer 1

を持ってしようとしています.close.right、あなたは発生からリダイレクトを防ぐことができます。

$('.property-wrapper .columns').on('click', function(evt) { 
    if ($(evt.target).is('.close.right')) { 
     return true; 
    } 
    window.location.href = $(this).parent().data('href'); 
}); 

上記のクリックハンドラが既に解雇ただろう、とリダイレクトがすでに発生したため、あなたはbodyにバインドされたハンドラでevent.stopPropagation()を使用することはできません。

Here's a fiddle which demonstrates thisとhere's a fiddle with the proposed solution