CODEWITHSUNDEEP
javascriptjqueryhtml
contactmatt
contactmatt

Reputation: 18600

Bind click event to container, but exclude element within container from event logic

<div style="width:200px; height:200px; background:blue;">
    <!-- Other markup -->
    <button type="button">Special Button</button>
</div>

(function ($) {
    $("div").click(function () {
        alert('fired');
        // Don't fire when the button is clicking!
    });
}(jQuery));

How can I architect the code/html to not fire the "div" click binding when the button is clicked? Here's a jsfiddle to play around with.

Upvotes: 0

Views: 499

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You need to prevent event propagation from the button

$('div button').click(function(event){
    event.stopPropagation()
})

Demo: Fiddle

Upvotes: 4

Related Questions