jQuery nested click events

Question

I have the following markup:

<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>

and 2 js function with 2 different click events as follow:

this one allows you to click the all row and take you to anoter page:

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

this one simply closes and removes the row you just clicked on:

  $('body').on('click', '.close.right', function(){
    $(this).parent().parent().parent().fadeOut(200, function(){
      CRO_106_removePropertyFromCookie($(this));
      CRO_106_hideOverlayIfNoPropertiesLeft();
    });
  });

the problem is that when on .close.right it also goes to the other page.

The 2 click events are conflicting.

I can edit the markup, I have tried to have an "a" wrapper around but that didnt work either..

check the event.target in the click handler bound to .columns, if it's .close.right, prevent the redirect from occurring. You can't use event.stopPropagation() here because the second handler is bound to the body, so by the time you stop propagation, the click handler which does the redirect has already fired — billyonecan
– billyonecan, Commented Aug 25, 2016 at 14:24

billyonecan · Accepted Answer · 2016-08-25 14:58:53Z

1

You need to check the event.target inside of the click handler bound to .property-wrapper .columns, and if it's .close.right, you can prevent the redirect from occurring:

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

You can't use event.stopPropagation() in the handler bound to the body because the above click handler would have already fired, and the redirect already occurred.

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

answered Aug 25, 2016 at 14:58

billyonecan

20.3k9 gold badges44 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery nested click events

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related