0

私の完全なスクリプトは実行されていますが、divをクリックするとdivが非表示になりませんが、それを非表示にするコードを書いています....どこで間違いを犯したか教えてください。

ここに私のコードがあります

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.lnkcss 
{
    margin-left:350px;
}

.BusyStyles
    {
        background-image: url('images/ajax-loader.gif');
        background-repeat: no-repeat; background-position: center center; 
    }

 #transition {

display:none;
position:absolute; top:50%; left:50%; z-index:50;
border:1px solid #666;
width:100px; height:100px;
}

</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#lnk').click(function (e) {
            $('body').append('<div id="transition"></div>').show();

            var $t = $('#transition'),
            to = $(this).offset(),
            td = $(document);

            //$t.children('div').css({ width: 100, height: 100 });
            $t.css({
                top: to.top + 50,
                left: to.left + 50,
                display: 'block'
            }).animate({
                top: td.height() / 2,
                left: td.width() / 2
            }, 600, function () {
                $(this).animate({
                    top: '-=75',
                    left: '-=50'
                }, 600);

                $(this).animate({
                    width: 250,
                    height: 200
                }, 600, function () {
                    $('#transition').addClass("BusyStyles");

                });
            });
            return false;
        });

        $('#transition').click(function (e) {
            alert('pp');
            $(this).hide();
        });
    });
</script>
</head>
<body>
<form id="form1" runat="server">
<a href="#" id='lnk' class="lnkcss">FeedBack</a>
</form>
</body>
</html>

$('#transition').click(function (e) {
            alert('pp');
            $(this).hide();
        });

上記の行はdivを非表示にするために書きましたが、divをクリックしても何も起こりません。

4

2 に答える 2

1

$('body').append('<div id="transition"></div>')ドキュメントが処理された後に要素をページに追加するにはbind any event handlers、静的な親要素が必要です。

$('#transition').click(function (e) {
    alert('pp');
    $(this).hide();
});

に変更する必要があります

$('body').on('click', '#transition', function (e) {
    alert('pp');
    $(this).hide();
});
于 2012-09-24T19:18:42.557 に答える
0

イベントは、その時点で存在するすべての「#transition」要素に適用されます。ハンドラーをインスタンス化しようとします。動的に作成されるため、現時点ではそのような要素はありません。

要素を作成した直後にイベント ハンドラーを適用できます。

http://jsfiddle.net/Du5k8/

于 2012-09-24T19:22:42.190 に答える