0

我有如下的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（可用类）时，函数已成功执行 - 此复选框是主 div 的子项（#banner-menu-holder）。

当我单击第二个 div 的复选框并且该功能不起作用时。jQuery 没有检测到这些复选框是主 div 的子级。

这个问题是 jQuery 还是其他？

4

3 回答 3

2

尝试使用closest()来检查当前元素是否有带有banner-menu-holderid 的父元素：

if (!$(ev.target).closest('#banner-menu-holder').length) {
    $('#banner-menu-holder').css('display', 'none');
}
于 2012-05-15T14:58:13.497 回答
1

好像你正在做事件委托，但是以一种非常笨重的方式。

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
});
于 2012-05-15T15:08:55.353 回答
1

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

if($(ev.target).closest('#banner-menu-holder').length > 0) {
    ...
}
于 2012-05-15T14:59:05.470 回答