I'm having an issue with input button click

Question

If I do a click based on id a border and background color is added. If I do another click based on id of button it should change the border and background color to another color but the click for button is not working to change color from green to black. I can't figure why. My code snippet is below. The if statement is never evaluated.

Thank You In Advance

if ($(".g_card").on('click', function() {
  $('#addon_1').addClass('baddon_1add');
  $("#gift_occasion").toggle();
}));

if ($("#work").on('click', function() {
  alert("button not working");
  $('#addon_1').removeClass('baddon_1add').addClass('.baddon_1');
}));

.baddon_1 {
  border: solid 1px #808080;
  background-color: #FFFFFF;
}
.baddon_1add {
  border: solid 2px #2D6E20;
  background-color: #EFF7ED;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div class="g_card">
  <input type='button' id="work" value='-' class='qtyminus' field='quantity' />
  <input type='text' id="g_quantity" name='quantity' value='0' class='qty' />
  <input type='button' id="some_occasion" value='+' class='qtyplus' field='quantity' />
  <br />
  <div id="gift_occasion" style="display:none">
    <select>
      <option>Occasion</option>
    </select>
  </div>
</div>

@Krishna You can do that, it will most likely output true since it returns an array. The code still gets executed, click handlers are set. The IF itself in this context is pointless. — Mouser
– Mouser, Commented Feb 2, 2015 at 15:20
I think you are getting the .click event binding wrong. You do not need the if statement if you are trying to bind a click event. Other than that, why do you bind your first click event for the whole container? — Caner Akdeniz
– Caner Akdeniz, Commented Feb 2, 2015 at 15:34

Mouser · Accepted Answer · 2015-02-02 15:40:19Z

1

$(".g_card").on('click', function() {
  $('#addon_1').addClass('baddon_1add');
  $("#gift_occasion").toggle();
});

$("#work").on('click', function(e) {
  e.stopPropagation();
  $('#addon_1').removeClass('baddon_1add').addClass('baddon_1');
});

.baddon_1 {
  border: 1px solid  #808080;
  background-color: #FFFFFF;
}
.baddon_1add {
  border: 2px solid #2D6E20;
  background-color: #EFF7ED;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div class="g_card">
  <input type='button' id="work" value='-' class='qtyminus' field='quantity' />
  <input type='text' id="g_quantity" name='quantity' value='0' class='qty' />
  <input type='button' id="some_occasion" value='+' class='qtyplus' field='quantity' />
  <br />
  <div id="gift_occasion" style="display:none">
    <select>
      <option>Occasion</option>
    </select>
  </div>
</div>
<div id="addon_1">I added this div to with ID addon_1.</div>

I do not know exactly where #addon_1 is supposed to be. But I think your problem lays with event propagation. I've added e.stopPropagation() to your minus button event handler. This prevents the event from bubbling up and executing the click handler on the parent. See the result in the snippet.

I also deleted the IFs around the event handler setters, they are pointless in this context. This piece of code is responsible for the canceling of the bubbling.

function(e) {
  e.stopPropagation();
}

The event passes it's event object as an argument, we reference it via e. We call stopPropagation, to stop the event bubbling up.

General lesson:

If you set multiple click handlers on the parent and the childs use event.stopPropagation() to run an event on the child, but not on the parent.

edited Feb 2, 2015 at 15:40

answered Feb 2, 2015 at 15:34

Mouser

13.3k3 gold badges31 silver badges54 bronze badges

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

3 Comments

user2280852 Over a year ago

This solved my issue! I would like to thank you very much for your quick

user2280852 Over a year ago

As I stated in previous post. this solved my issue. Thank You so much this saved me a lo tof hair pulling. I thought about the prevent default but the stopPropagation.

K Scandrett Over a year ago

@user2280852 I see you haven't accepted answers to any of your questions. I was going to answer your latest question (stackoverflow.com/questions/44096906/…) but that puts me off. I won't be the only one. That said, you should only accept answers that do help solve your issue.

Collectives™ on Stack Overflow

I'm having an issue with input button click

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related