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或on代替click:

// 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 的 live，所以应该使用 on()

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