CODEWITHSUNDEEP
javascripthtmljqueryonclick
Cristian Cutitei
Cristian Cutitei

Reputation: 150

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

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!

Upvotes: 0

Views: 77

Answers (1)

Wael Zoaiter
Wael Zoaiter

Reputation: 716

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>

Upvotes: 1

Related Questions