how to stop container trigger function

Question

if .hidden is hidden after click lt(contain all whatever click on title or icon or space) the .hidden will show. then how to make only click .icon the .hidden will become hide?

now it is not work, after click .icon nothing happen ... I guess because .icon is inside .lt, when click .icon the .lt will trigger click too then after hide execute .lt click function?

$('.lt').on({'click': function() {
    if(!$('.$('.hidden').is(:visible)')){
        var src="b";
        $('.icon img').attr('src', src);
        $('.hidden').show();
    }
});
$('.icon').on({'click': function() {
    if($('.$('.hidden').is(:visible)')){
        var src="a";
        $('.icon img').attr('src', src);
        $('.hidden').hide();
    }
});

<div class="lt">
    <div class="title">
    </div>
    <div class="icon">
        <img src="a">
    </div>
    <div class="hidden">
    </div>
</div>

.hidden{display:none;}

Thanks for remind I didn't notice should use this.. – vibskov Jun 10 '13 at 11:52 — vibskov, Jun 10 '13 at 11:52

A. Wolff · Accepted Answer · 2013-06-10T11:59:36.413

2

Looks like you need to stop propagation of nested element's event:

$('.icon').on({'click': function(e) {
    e.stopPropagation();
    //...
});

edited Jun 10 '13 at 11:59

answered Jun 10 '13 at 11:45

A. Wolff

74,033
9
94
155

Jai · Answer 2 · 2013-06-10T12:03:15.727

.stopPropagation() is what you need but you have issues with the code in if condition:

$('.lt').on({'click': function() {
   if(!$('.hidden').is(':visible')){  //<----change this way here
      var src="b";
      $('.icon img').attr('src', src);
      $('.hidden').show();
   }
});

in the above script you can check for hidden straight if($('.hidden').is(':hidden')){

Here below you have to place .stopPropagation() to stop the event to bubble up to its parent in the tree.

$('.icon').on({'click': function(e) {
   e.stopPropagation();               //<----it stops the event bubbling
   if($('.hidden').is(':visible')){   //<----this should also be changed to this
      var src="a";
      $('.icon img').attr('src', src);
      $('.hidden').hide();
   }
});

how to stop container trigger function

2 Answers2