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?](https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli) — TobySuch, Oct 25 '20 at 16:54
The following article should help you understand event propagation and event bubbling... https://www.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, Oct 25 '20 at 17:10

score 1 · Accepted Answer · answered Oct 25 '20 at 17:34

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>

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

1 Answers1