Question

我有一个DIV元素，在执行某个操作时会出现。为了简单起见，我写了一个非常简单的例程来模仿我遇到的问题。但是，我遇到的问题是，当您点击DIV元素内部（以及textarea之外）时，无论如何都会隐藏DIV。

以下是代码：

<body>
outside div
<br><br>

<a href="#" id="wrap_on">make inside appear</a>
<br><br>

<div id='wrap' style='background:red;display:none;padding:10px;width:155px'>
    <textarea id='inside'>inside div</textarea>
    <div id='inside2'>also inside div -- click me</div>
</div>
</body>

<script>
$(document).ready(function() {
    $('#wrap_on').click(function() {
        $('#wrap').show();
        $('#inside').select().focus();    
    });

    $('#inside2').click(function() {
        alert('test');
    });

    // #inside2 does not work but #wrap does hide
    $('#wrap').focusout(function() {
        $('#wrap').hide();
    });
});
</script>

或者你可以在这里修补它：http://jsfiddle.net/hQjCc/

基本上，我希望能够点击文本“也在div里面 - 点击我”并点击警告弹出窗口。但是，.focusout函数阻止它工作。另外，如果您点击它之外我想要隐藏#wrap DIV。

Answer 1

$(document).click(function(e) {
    var t = (e.target)
        if(t!= $("#inside").get(0) && t!=$("#inside2").get(0) && t!=$("#wrap_on").get(0) ) {
            $("#wrap").hide();
        }
});

毕竟这应该可行。

http://jsfiddle.net/hQjCc/4/

Answer 2

请参阅此其他堆栈溢出问题：Use jQuery to hide a DIV when the user clicks outside of it

jQuery - 如何仅在单击外部时隐藏DIV元素

2 个答案: