0

私は jQuery を使って遊んで (読み: 最初の進出)、簡単なメモを取るアプリケーションを作成しています。現在、データベース ala ajax からコンテンツを取得し、それをページに挿入しています。ただし、動的コンテンツ (保存ボタン) で .click() の単純なコールバックを実行しようとすると、機能しません。その意図は、コンテンツをデータベースに戻して保存することです。

jquery を動的に作成しているのと同じコンテンツを取得し、それを Web サーバーが送信している HTML に静的に投げ込むと、機能します。なぜ一方が機能し、もう一方が機能しないのかわかりません。

問題のあるウェブサイト

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <link rel="stylesheet" type="text/css" href="layout.css" />
        <script type="text/javascript" src="jquery-1.7.1.min.js"></script>

        <!--Get notes out of database and show them-->
        <script type="text/javascript">
        $(function()
        {
                $.ajax({
                        url: 'noteGet.php',
                        data: "",
                        dataType: 'json',
                        success: function(rows)
                        {
                                for (var i in rows) {
                                        var noteId = rows[i][0];
                                        var noteContent = rows[i][2];
                                        $('#allNotes')
                                                .append('<span id="stickyNote'+noteId+'" class="stickyNote"><textarea id="stickyNoteTextArea'+noteId+'" class="stickyNoteTextArea">'+noteContent+'</textarea><a href="#" id="stickyNoteSave'+noteId+'">save</a></span>')
                                }
                        }
                });


                //works
                $('#stickyNoteSave1').click(function() {
                        alert("save button clicked");
                });

                //does not work
                $('#stickyNoteSave13').click(function() {
                        alert("save button clicked");
                });

        });
        </script>

        <!--
        <script type="text/javascript">
                $('#noteForm').submit(function(event) {
                        event.preventDefault();

                        $.post("notePost.php", $('#noteTextArea').serialize(), function(data) {
                                alert(data);
                        });
                });

        });
        </script>
        -->

</head>
<body>
        <span id="allNotes">
                <!---The .click callback with the jquery selector works for only this span!-->
                <span id="stickyNote1" class="stickyNote"><textarea id="stickyNoteTextArea1" class="stickyNoteTextArea">fake</textarea><a href="#" id="stickyNoteSave1">special save</a></span>')
        </span>

</body>
</html>
4

4 に答える 4

2

イベントをバインドすると、そのイベントはセレクターによって一致するDOM要素にアタッチされます。要素がまだ存在しない場合、何もバインドされません。

解決策は、デリゲートを使用することです。

$('#container').on('click', '.elementselector', function() {

})

#container新しく挿入された要素を含む要素である必要があり（可能性がありますがdocument、より具体的なものの方が優れています）、.elementselector実際にイベントが必要な要素に一致するセレクターである必要があります。#stickyNoteSave13

于 2012-04-22T19:12:24.297 に答える
1

の代わりにdelegate、liveまたはを使用してください：onclick

// live
$('#stickyNoteSave13').live('click',function(){/*...*/});

また

// on
$('#stickyNoteSave13').on('click',function(){/*...*/});

また

// delegate
$('sticky-notes-container-selector').delegate('#stickyNoteSave13','click',function(){/*...*/});

jQuery 1.7以降を使用しているようですので、次のような「on」メソッドを使用することをお勧めします。

 $('sticky-notes-container-selector').delegate('click','#stickyNoteSave13',function(){/*...*/});
于 2012-04-22T19:11:20.550 に答える
0

使用live：

 $('#stickyNoteSave13').live('click',function() {
        alert("save button clicked");
    });
于 2012-04-22T19:10:48.057 に答える
0

jQuery 1.7以降ではjQueryのライブは推奨されないため、on（）を使用する必要があります

$(document).on('click', '#stickyNoteSave13', function(){/*...*/});
于 2012-04-22T19:12:31.230 に答える