CODEWITHSUNDEEP
jquery
Jerry Jones
Jerry Jones

Reputation: 796

Catch two different click event inside a div using jQuery

I have an image and a check box placed inside a div. There are two different events of click in it. One is :

  1. When I click the check-box the check-box should be selected(checked) and the other is
  2. When I click the image a light-box should appear.

What happening is; when I click the image, the light-box appear but when I click the check-box, again the light-box is appearing.

<div class="divWrap">
    <div class="imageWrap">
        <img src="abc.jpg">
        <div id="checkbox">
                <input type="checkbox" value="None" id="checkbox1" name="check1" />
        </div>
    </div>
</div>

I am not able to code it properly in jQuery. Can anyone help?

Upvotes: 2

Views: 2027

Answers (1)

Andreas Louv
Andreas Louv

Reputation: 47137

$(".imageWrap img").click(function() {
    alert("image clicked");
});

$(".imageWrap checkbox").click(function() {
    alert("checkbox clicked");
});

$(".imageWrap").click(function(event) {
    var $target = $(event.target);
    if ( $target.is("img") ) {
        alert("image clicked");
    }
    else if ( $target.is("checkbox") ) {
        alert("checkbox clicked");
    }
});

Upvotes: 3

Related Questions