Question

我有这个简单的代码，在主体内附加一个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上的点击事件不起作用。我看起来很简单，但我不知道为什么工作不正常。

Answer 1

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();
                    });
                });
            });

Answer 2

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

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

基本上，您无法为尚不存在的元素设置单击处理程序，但是您可以将单击委托给父级，在此实例中为document。当文档收到点击时，它会检查以确保它来自#fade并做你需要做的任何事情。

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

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

Answer 3

的 THE DEMO. 的

您不需要每次都创建新的div ，只需将其缓存在本地变量中。

使用.on会有效，但不是必需的。

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

Answer 4

jquery中的

.remove()仅接受selector作为参数

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

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

DEMO

Answer 5

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

$('#fade').click( function() {
    $('#fade').fadeOut('fast');
});

Answer 6

<!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>

div click事件不起作用

6 个答案: