Triggering click event of parent div

Question

I have a issue where the .click from the div where my cancel button is nested in triggers when I click the button. This causes both the slideUp and slideDown to trigger at the same time, which results in the div staying visible. I've tried adding a state to prevent the div from sliding down again, but this does not have the desired effect.

$(add).click(function () {
 var inputDiv = Polymer.dom(root_root).querySelector("#inputDiv");
 if(state == 0){
   $(inputDiv).slideDown(300);
  }
 state = 1;
});
 $(cancel).click(function () {
  var inputDiv = Polymer.dom(root_root).querySelector("#inputDiv");
  $(inputDiv).slideUp(300);
  state = 0;
});

https://jsfiddle.net/kkdoneaj/2/

Does anyone know how to work around this issue?

Post the HTML code, please.

apires
– apires

2017-05-25 20:58:15 +00:00
Commented May 25, 2017 at 20:58 — apires
– apires, Commented May 25, 2017 at 20:58
api.jquery.com/event.preventdefault

Jon Uleis
– Jon Uleis

2017-05-25 20:58:31 +00:00
Commented May 25, 2017 at 20:58 — Jon Uleis
– Jon Uleis, Commented May 25, 2017 at 20:58

Sphinxxx · Accepted Answer · 2017-05-25 23:04:57Z

1

Use Event.stopPropagation() to stop the click from bubbling from the #cancel button to the parent #add div:

$("#cancel").click(function(e) {
    e.stopPropagation();
    ...
});

https://jsfiddle.net/kkdoneaj/3/

answered May 25, 2017 at 23:04

Sphinxxx

13.1k5 gold badges60 silver badges89 bronze badges

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

Comments

alessandrio · Accepted Answer · 2017-05-25 22:04:51Z

0

you should put stop

Stop the currently-running animation on the matched elements.

$(add).click(function () {
  var inputDiv = Polymer.dom(root_root).querySelector("#inputDiv");
  $(inputDiv).stop().slideDown(300);
});
$("#cancel").click(function (e) {
  var inputDiv = Polymer.dom(root_root).querySelector("#inputDiv");
  $(inputDiv).stop().slideUp(300);
  e.stopPropagation();
});

edited May 25, 2017 at 22:04

answered May 25, 2017 at 21:03

alessandrio

4,3802 gold badges31 silver badges42 bronze badges

5 Comments

Michelindoll Over a year ago

Thanks for your answer, sadly doing this locks the div in the down position.

alessandrio Over a year ago

@Michelindoll I do not understand what you mean

Michelindoll Over a year ago

When testing with stop included in the code the div will slideDown just fine, but it refuses to move up again when the cancel button is pressed.

alessandrio Over a year ago

@Michelindoll Try again with the update of my answer

Heretic Monkey Over a year ago

@Michelindoll The code in the fiddle (previous to your modifications based on this answer) should be in the question itself.

Nicolas Budig · Accepted Answer · 2017-05-25 23:14:35Z

0

Others have commented with stopPropagation(), but you can also not expand #inputDiv unless it's already visible, like so:

$(function(){
  $("#add").click(function () {
    if($("#inputDiv").css('display') == 'none'){
      $("#inputDiv").slideDown(1000);
    }
  });
  $("#cancel").click(function () {
    $("#inputDiv").slideUp(1000);
  });
});

answered May 25, 2017 at 23:14

Nicolas Budig

3911 silver badge8 bronze badges

Collectives™ on Stack Overflow

Triggering click event of parent div

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related