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）の子です。

2番目のdivのチェックボックスをクリックしても、関数が機能しませんでした。jQueryは、これらのチェックボックスがメインdivの子であることを検出しませんでした。

その問題はjQueryにあるのでしょうか、それともそうではありませんか？

4

3 に答える 3

2

を使用して、現在の要素にIDclosest()を持つ親があるかどうかを確認してみてください。banner-menu-holder

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

何をしようとしているのか正確にはわかりませんが、クリックした要素が要素内にあるかどうかを確認しようとしている場合は、次の#banner-menu-holderように記述します。

if($(ev.target).closest('#banner-menu-holder').length > 0) {
    ...
}
于 2012-05-15T14:59:05.470 に答える
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 に答える