2

我有这个简单的代码，在正文中附加了一个 div，

<!DOCTYPE html>
<html>


    <head>
        <script type="text/javascript" src='/libs/jquery/jquery.js'></script>
        <script>
            $(document).ready( function() {
                $('#show').click( function() {
                    $("<div id='fade'></div>").appendTo('body');
                    $('#fade').fadeIn('fast');
                });

                $('#fade').click( function() {
                    $('#fade').remove('fast');
                });
            });
        </script>
    </head>

    <body>
        <div>
            <input type="button" value="show" id="show"/>
        </div>
    </body>
</html>

css

#fade {
    display: none;
    background: black;
    opacity:0.4;
    filter:alpha(opacity=50);
    z-index: 1;
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 100%;
}

#window {
    width: 440px;
    height: 356px;
    background: white;
    position:fixed;
    left:50%;
    top:30%;
    margin:-70px 0 0 -245px;
    z-index: 2;
}

附加我的 div#fade 工作正常，但我在#fade 上的点击事件不起作用。我看起来很简单，但我不知道为什么不能正常工作。

4

6 回答 6

5

http://jsfiddle.net/ffK3u/1/上的工作解决方案

$(document).ready( function() {
                $('#show').click( function() {
                    $("<div id='fade'></div>").appendTo('body');
                    $('#fade').fadeIn('fast');
                });

                $(document).on("click","#fade", function() {
                    $('#fade').fadeOut("slow",function(){
                        $('#fade').remove();
                    });
                });
            });
于 2012-07-26T08:54:55.670 回答
3

假设您使用的是 jQuery 1.7，您可以使用.on()将点击委托给文档级别。

$(document).on('click', '#fade', function() {
    $('#fade').remove('fast');
});

基本上，您不能为尚不存在的元素设置点击处理程序，但是在这种情况下，您可以将点击委托给父级document。当文档收到点击时，它会检查以确保它来自#fade并执行您需要执行的任何操作。

此方法是 的更新和更好的版本.live()，您可能见过也可能没有见过用于将事件绑定到动态插入到 DOM 中的元素。

为了进一步阅读，此技术依赖于事件冒泡和事件委托。

于 2012-07-26T08:47:06.863 回答
2

演示。

您不需要每次都创建一个新的 div，只需将其缓存在局部变量中即可。

使用.on将起作用，但不是必需的。

var fade = $("<div id='fade'></div>").click(function () {
    $(this).fadeOut('fast');
});

$('#show').click(function () {
    fade.appendTo('body').fadeIn('fast');
});
于 2012-07-26T08:52:34.140 回答
1

.remove()在 jquery 中只接受selector作为参数

            $('#show').click( function() {
                $("<div id='fade'></div>").appendTo('body');
                $('#fade').fadeIn('fast');

                $('#fade').click( function() {
                    $(this).remove();
                });
            });

演示

于 2012-07-26T08:50:45.580 回答
0

如果您希望它淡出，请执行以下操作：

$('#fade').click( function() {
    $('#fade').fadeOut('fast');
});
于 2012-07-26T08:51:09.553 回答
0 
<!DOCTYPE html>
<html>


    <head>
        <script type="text/javascript" src='jquery-1.7.1.min.js'></script>
        <script>
            $(document).ready( function() {
            alert($('#show'));
                $('#show').click( function() {
                    alert(0);//this code already execution,prove click event not problem.
                    $("<div id='fade'></div>").appendTo('body');//issue here 'body' replace document.body
                    $('#fade').fadeIn('fast');
                });

                $('#fade').click( function() {
                    $('#fade').remove('fast');
                });
            });
        </script>
    </head>

    <body>
        <div>
            <input type="button" value="show" id="show"/>
        </div>
    </body>
</html>
于 2012-07-26T08:53:49.083 回答