1

私はここで完全に道に迷っています。なぜこれが起こっているのかわかりません。

.js ファイルに次のコードがあります。

$( document ).ready(function() {
    showMessage();
    $( '#message' ).slideDown( 'fast' );

    //Hide Message//
    $( '#m_close' ).click(function( event ) {
        $( '#message' ).slideUp( 'fast' );
    });
    //---//
    $( '#m_button' ).click(function( event ) {
    showMessage();
    $( '#message' ).slideDown( 'fast' );
    });
});

これで、メッセージ div が作成され、ページが最初に読み込まれたときに完全にうまくスライドします。#m_close を押すと、div が完全にスライドします。ただし、#m_button を押すと、メッセージは適切な情報とともにスライドダウンしますが、#m_close を押しても何も起こりません。開発コンソールにエラーは表示されません。問題はないようです。動作を拒否するだけです。#m_close に slideDown を追加して、閉じてから再度開くようにしました。これにより、#m_close は #m_button が押されるまで無限に機能します。

何が起こっている？

編集:リクエストごとの私のHTML:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="includes/style.1.css" rel="stylesheet" type="text/css" />
    <script src="includes/jquery.js"></script>
</head>
<body>
    <div id="message">

    </div>
    <button id="m_button">Message</button>
    <script src="includes/functions.js"></script>
</body>

4

1 に答える 1

2

メッセージが動的に読み込まれ、メソッドを使用して要素m_closeに追加される可能性があるようです。messageshowMessage()

だから試してみてください

$( document ).ready(function() {
    showMessage();
    $( '#message' ).slideDown( 'fast' );

    //Hide Message//
    $( '#message' ).on('click', '#m_close', function( event ) {
        $( '#message' ).slideUp( 'fast' );
    });
    //---//
    $( '#m_button' ).click(function( event ) {
        showMessage();
        $( '#message' ).slideDown( 'fast' );
    });
});

clickクリックイベントハンドラーを登録するために使用すると、その時点でdomに存在する要素のみにハンドラーが登録されます。showMessage再度呼び出すと、既存のm_closeものが削除され、新しい要素が作成されるため、clickハンドラーは新しい要素に関連付けられなくなります。ここでの解決策は、上記のようにイベント委任を使用することです

于 2013-07-29T03:48:16.707 に答える