jQuery通过单击页面上的任意位置关闭DIV

Question

我想email-signup点击时打开email-signup-link.然后我想通过点击页面上的任何地方来关闭它,当然除了盒子本身.

我在这个网站上环顾四周,这个问题有各种各样的解决方案,但我尝试过的每个人都会立即隐藏我的div.我一定做错了什么.

这是HTML:

<a href="#" id="email-signup-link">Sign Up</a>
<div id="email-signup">
    <div id="inner">
        <h2>E-mail Notifications</h2>
        <input class="" type="text" name="description" placeholder="Enter your e-mail address" id="description" />
        <a href="#">Sign Up</a>
    </div>
</div>

这是我的Javascript:

$('#email-signup').click(function(){
    e.stopPropagation();
});
$("#email-signup-link").click(function() {
    e.preventDefault();
    $('#email-signup').show();
});
$(document).click(function() {
    $('#email-signup').hide();
});

Answer 1

两件事情.您实际上没有e定义,因此您无法使用它.您还需要stopPropagation在其他点击处理程序中:

$('#email-signup').click(function(e){
    e.stopPropagation();
});
$("#email-signup-link").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $('#email-signup').show();
});
$(document).click(function() {
    $('#email-signup').hide();
});?

http://jsfiddle.net/Nczpb/

Answer 2

$(document).click (function (e) {
    if (e.target != $('#email-signup')[0]) {
        $('#email-signup').hide();
    }
});