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()jqueryselectorではパラメータとしてのみ受け入れる

            $('#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 に答える