jQuery - How to make element not execute onclick function from parent?

Question

In this example I have the onclick function on the main div and i dont want the button to execute the same onclick, only execute its own? how should i paroach this?

<div onclick="$('#extra-info').slideToggle();" class="card card-body item">
<div class="row">
    <h6 style="position:absolute;left:2%;">Comanda      #1</h6>
    <h5 style="position:absolute;right:2%;">15 min</h5>
</div>
<br>
<br>
<div class="row">
    <div class="col col-md-10">
        <h5>Cristian Cutitei</h5>
        <h6>0737032567</h6>
    </div>
    <div>
        <button id="status" onclick="checkText('#status', 2);" style="margin:auto;" class="btn btn-primary"><span>In pregatire</span></button>
    </div>
</div>

<div id="extra-info" style="display:none;">
    <br>

</div>

Thank you in advance!

Does this answer your question? How do I prevent a parent's onclick event from firing when a child anchor is clicked? — TobySuch
– TobySuch, Commented Oct 25, 2020 at 16:54
The following article should help you understand event propagation and event bubbling... sitepoint.com/event-bubbling-javascript. You could just not use `onclick="function()" inline functions and define your functions within a script file or script tags and query specific elements using their specific element identifiers. — dale landry
– dale landry, Commented Oct 25, 2020 at 17:10

Wael Zoaiter · Accepted Answer · 2020-10-25 17:34:39Z

You can do that by calling event.stopPropagation(); in the button.

<button id="status" onclick="checkText('#status', 2); event.stopPropagation();" style="margin:auto;" class="btn btn-primary"><span>In pregatire</span></button>

Read more about it from Here

But I would suggest a cleaner solution, Separate the card body from the card footer where the button exist.

<div class="card card-body item">
  <div onclick="$('#extra-info').slideToggle();">
    <div class="row">
      <h6 style="position:absolute;left:2%;">Comanda #1</h6>
      <h5 style="position:absolute;right:2%;">15 min</h5>
    </div>
    <br>
    <br>
    <div class="row">
      <div class="col col-md-10">
        <h5>Cristian Cutitei</h5>
        <h6>0737032567</h6>
      </div>
    </div>
  </div>

  <div>
    <button id="status" onclick="e => e.stopPropagation();" style="margin:auto;" class="btn btn-primary"><span>In pregatire</span></button>
  </div>
</div>
<div id="extra-info" style="display:none;">
  <br>
</div>

Collectives™ on Stack Overflow

jQuery - How to make element not execute onclick function from parent?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related