CODEWITHSUNDEEP
jqueryhtmlonclick
Cybertronian
Cybertronian

Reputation: 483

how to disable or ignore a click() event

I've made a card surrounding with an anchor tag and applied a onclick() event on the card using it's id, the click is working fine but the problem here is even if the checkbox, image or button of card gets clicked the click event of the card fires up but I've to use the checkbox and button for another purpose, so is there any way to disable or ignore the click event of the card when the checkbox or the button gets clicked

HTML:

<div id="row" id"myDiv">
    <div class="col-6">
        <div class="card card2"
                style="margin-bottom: 0.5rem !important;"
                id="btnQuoteSummary">
            <div class="row">
                <div class="col-9"></div>
                <div class="col-3">
                    <div class="form-check">
                        <input type="checkbox" name="checkSelect"
                            id="checkSelect1"><label for="checkSelect1"></label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-4">
                    <div class="card-header">
                        <span class="float-left"><img
                            class="card-img-top insLogo"
                            style="width: 5rem; object-fit: contain;"
                            src="/static/images/86d5b04c-1201-4ef4-b0e8-88503c719e2b.jpg"
                            alt="my image"></span>
                    </div>
                </div>
                <div class="col-4"></div>
                <div class="col-4">
                    <div class="min-width-zero">
                        <button class="btn btn-primary">
                            <span>3,954</span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-8">
                    <p class="mb-2 text-muted" style="margin-left: 4.5rem;">value</p>
                </div>
                <div class="col-4">
                    <p class="mb-2 text-muted">4.35</p>
                </div>
            </div>
        </div>
</div>

JQuery:

$('#myDiv').on('click', '#btnQuoteSummary', function () {
    alert('card click event fired')
});

Please help me here

Upvotes: 0

Views: 5592

Answers (4)

Muhammad Kamran Aslam
Muhammad Kamran Aslam

Reputation: 658

One option through. CSS

.avoid-clicks {
  pointer-events: none;
}

Or through jQuery:

$( "#btnQuoteSummary " ).click(function( event ) {
  event.preventDefault();
}

Upvotes: 0

Kali SPM
Kali SPM

Reputation: 137

Just off click event for that particular button-through following code,

$('#btnQuoteSummary').off('click');

This will work perfectly.

Upvotes: 1

rover cj
rover cj

Reputation: 96

Try putting these lines in the click event of child elements to disable triggering the click event of parent element

if (!e) var e = window.event;
  e.cancelBubble = true;
  if (e.stopPropagation) e.stopPropagation();

Eg: 

 $("your-button-id / your-input-checkbox-id /your-img-id etc").click(function(){
    /*
    code to execute (if any)
    */
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
 });

Upvotes: 0

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

You can try below code.

$(document).ready(function(){
  $('#btnQuoteSummary').click(function(event){
        alert('card click event fired');
        event.preventDefault();
    });
});

Upvotes: 1

Related Questions