jquery - jQueryを使用してdiv内の2つの異なるクリックイベントをキャッチ

Question

div内に画像とチェックボックスを配置しています。クリックには 2 つの異なるイベントがあります。1つは次のとおりです。

1. チェックボックスをクリックすると、チェックボックスが選択（チェック）され、もう一方は
2. 画像をクリックすると、ライトボックスが表示されます。

何が起こっているのですか。画像をクリックするとライトボックスが表示されますが、チェックボックスをクリックすると再びライトボックスが表示されます。

<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>

jQueryで正しくコーディングできません。誰でも助けることができますか？

Answer 1

$(".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");
    }
});