Question

我有如下的html结构：

<div id="banner-menu-holder">
    <div>
        <div class="avalible">
            <div class="items-holder">
                <div>
                    <div class="img-holder">
                        <div>
                            <input id="set_banner_29" type="checkbox" onclick="mod.setBanner(29);">
                            ...
                        </div>
                    </div>
                </div>
                ...
            </div>
        </div>
        <div class="ready">
            <div class="items-holder">
                <div>
                    <div class="img-holder">
                        <div>
                            <input id="rem_banner_1_8_32" class="remove_banner" type="checkbox" checked="checked">
                            ...
                        </div>
                    </div>
                </div>
                ...
            </div>
        </div>
    </div>
</div>

和js代码：

$(document).click(function(ev) {
    if ($(ev.target).parents().index($('#banner-menu-holder')) == -1) {
        $('#banner-menu-holder').css('display', 'none');
    }        
})

当我点击复选框进入第一个div（类avalible）时，函数已成功执行 - 此chekbox是主div的子项（＃banner-menu-holder）。

当我点击第二个div的复选框时，该功能无效。 jQuery没有检测到这些复选框是主div的子项。

这个问题是jQuery还是其他？

Answer 1

尝试使用closest()检查当前元素是否具有banner-menu-holder id的父级：

if (!$(ev.target).closest('#banner-menu-holder').length) {
    $('#banner-menu-holder').css('display', 'none');
}

Answer 2

我不确定你要做什么，但如果你想看看被点击的元素是否在#banner-menu-holder元素内，我会这样写：

if($(ev.target).closest('#banner-menu-holder').length > 0) {
    ...
}

Answer 3

好像你正在做事件委托，但是很笨重。

jQuery使.on()更容易实现。

$(document).on('click', '#banner-menu-holder', function(ev) {
    $('#banner-menu-holder').css('display', 'none');
});
$(document).on('click', ':not(#banner-menu-holder)', function(ev) {
    $('#banner-menu-holder').css('display', 'none');
});

如果您使用的是jQuery 1.4-1.6.x，则需要使用.delegate()。

$(document).delegate('#banner-menu-holder', 'click', function(ev) {
    $('#banner-menu-holder').css('display', 'none');
});

$(document).delegate(':not(#banner-menu-holder)', 'click', function(ev) {
    // do something else
});

jQuery错误地检测到父母

3 个答案: