Question

我有这个HTML：

<style>
div.icons {
    background-color:red;
    width:100px;
    height:100px;
    float:left; 
    margin-right:10px;
}
</style>

<div class="icons"><input type="checkbox" checked="checked" />Box 1</div>
<div class="icons"><input type="checkbox" checked="checked" />Box 2</div>
<div class="icons"><input type="checkbox" checked="checked" />Box 3</div>

这个JQuery ......

<script>
$(document).ready(function() {
    $("div.icons").click(
        function(){
            if ($(this).children("input").is(":checked")) {
                $(this).css("background-color","yellow");
                $(this).children("input").attr('checked', false);
            } else {
                $(this).css("background-color","red");
                $(this).children("input").attr('checked', true);
            }
        }
    );

});
</script>

当我点击div时，jquery会更改div的背景颜色并取消选中它内部的输入。但是当我点击div内部的输入复选框时，它不会检查输入框。

单击复选框时是否可以覆盖$("div.icons").click？或者有更好的方法吗？

Answer 1

是的，如果您将event.stopPropagation()添加到复选框元素的click事件处理程序，则可以阻止click事件冒泡复选框的父项：

$('.icons').children().on('click', function (event) {
    event.stopPropagation();
});

Answer 2

我会这样做的。我认为代码要简单得多。

使用类来管理显示。您可以使用jQuery的toggleClass函数切换类。
使用jQuery的.trigger启动每个div的输入元素的点击
防止点击输入的传播产生无限循环。

http://jsfiddle.net/4hLrF/

div.icons {
    background-color:red;
    width:100px;
    height:100px;
    float:left; 
    margin-right:10px;
}

div.checked {
     background: yellow;   
}

$('input').click( function(e) {
    $(this).parent().toggleClass('checked');
    e.stopPropagation();
});

$('div').click( function() {
    $(this).children('input').trigger('click');
});

Answer 3

这是覆盖jQuery click事件的另一种方法：

$('div').unbind('click').on('click', '.icons', function (event) {
    event.stopPropagation();
});

它对我有用。

覆盖Jquery .click事件

3 个答案: