Jquery 如何使javascript工作以响应稍后以AJAX方式添加的按钮

我有一张表格要提交邮件。我想以

AJAX

的方式提交。以下代码有效，但新添加的“回复”按钮无效：

      {% block body %}
<script type="text/javascript" src="{{ url_for('static', filename='jquery.form.js') }}"></script>
<script type="text/javascript">
    // wait for the DOM to be loaded
    $(document).ready(function () {
        $("#message_form").ajaxForm(function () {
            var messageid = '';
            var messagepubdate = 0;
            // GET NEWEST MESSAGE ID
            $.getJSON($SCRIPT_ROOT + '/_get_new_message', function (data) {
                messageid = data.messageid;
                messagepubdate = data.messagepubdate;
                //alert(messageid); //TESTED! the messageid is the newly added message's _id!
                var div = document.createElement("div");
                div.innerHTML = "<li><img src='{{ g.get_user(g.user._id).email|gravatar(size=48)}}'><p> " +
                 "<strong><a href='{{url_for('user_timeline', username=g.user._id)}}'>{{ g.user._id}}</a></strong>&nbsp; " + $('#new_message').val()
                 + "<small>&mdash; " + messagepubdate + "</small><p align='right' style='text-align: right'><small><a href='#' data-messageid='#replies" + messageid + "' class='reply'>Reply</a></small></p><p><br /><div class='replies hidden' id='replies" + messageid + "'></div></p></p></li>";
                $('ul#messages').prepend(div);
            });
            return false;
        });
    });
</script>

{%block body%}
//等待加载DOM
$（文档）.ready（函数（）{
$（“#消息表单”）.ajaxForm（函数（）{
var messageid=''；
var messagepubdate=0；
//获取最新消息ID
$.getJSON（$SCRIPT\u ROOT+'/\u get\u new\u message'，函数（数据）{
messageid=data.messageid；
messagepubdate=data.messagepubdate；
//警报（messageid）；//已测试！messageid是新添加的消息的_id！
var div=document.createElement（“div”）；
div.innerHTML=“
”+
“”+$（“#新消息”）.val（）
+“&mdash；“+messagepubdate+”

”；
$（'ul#messages'）。前置（div）；
});
返回false；
});
});

对于旧邮件，以下脚本可以很好地切换replies div：

<script type=text/javascript>
    $(function () {
        $('a.reply').click(function () {
            messageid = $(this).attr('data-messageid');
            $(messageid).text('loading');
            $.getJSON($SCRIPT_ROOT + '/_get_replies', { messageid: messageid.substring(8) }, function (data) {
                $(messageid).html(data.result);
                $(messageid).slideToggle(0);
            });
            return false;
        });
    });
</script>

$（函数（）{
$（'a.reply'）。单击（函数（）{
messageid=$（this.attr（'data-messageid'）；
$（messageid）.text（'loading'）；
$.getJSON（$SCRIPT\u ROOT+'/\u get\u repress'，{messageid:messageid.substring（8）}，函数（数据）{
$（messageid）.html（data.result）；
$（messageid）.slideToggle（0）；
});
返回false；
});
});

您需要使用

live（）

函数，并将

单击

作为要处理的事件传递

.click（）

适用于当前存在的所有对象

.live（）

适用于所有当前和将来的对象

$('a.reply').live( 'click' , function (e){ ... } );

更多阅读：

更新

正如其他人所指出的，

live（）

已被弃用，您应该使用

on（）

---

添加到DOM的元素必须附加事件处理程序。您需要在AJAX调用之后，或者提前使用jQuery的

.on（）

或

.live（）

功能附加它们。

jQuery 1.7的官方答案是

您可以使用

jQuery.on

订阅任何事件，也可以使用

jQuery.off

取消订阅

要侦听与

a.reply

匹配的元素的所有单击，无论该元素何时添加到文档中，都可以使用以下代码：

$(document.body).on('click', 'a.reply', function() { /* ... */ });

同样，您可以使用

$('body').on('click', 'a.reply', function() { /* ... */ });

基本上，

$（'body'）

是添加事件侦听器的上下文。因此，实际上，jQuery正在等待任何事件冒泡到

body

元素，并检查该事件是否是

click

事件。如果是，并且生成click事件的元素与

a.reply

选择器匹配，那么jQuery将触发作为第三个参数传递的委托

如果我们只是这样做：

$('a.reply').on('click', function() { /* ... */ });

它将以相同的方式工作，但只侦听由

a.reply

选择最初选择的元素生成的事件。因此，随后添加到dom中的任何新元素都不会被包括在内。而且，因为我们没有向方法上的

添加选择器，所以它不会侦听子事件

编辑

在以前版本的jQuery中，您将使用，它的工作方式类似，如果不是完全相同的话。在jQuery 1.7中，
jQuery.live
简单地包装
jQuery.on
如果需要将事件附加到将来可能添加的元素（通过Ajax），那么应该始终使用事件委派

简单来说，它的工作原理是将事件附加到父元素，然后检查单击了哪个子元素。添加或删除子元素并不重要

在jQuery中使用委派的正确方法是使用.on（）和.off（）方法：

.live（）和delegate（）已被弃用以支持此新语法

事实上，jQuery现在只是将对这些函数的调用直接传递到.on（）和.off（）

注意：这不仅在Ajax应用程序中有用。例如，如果您有一个包含1000行的表，那么在表本身上使用委派事件比附加到100个元素要有效得多

进一步阅读：





live已被弃用（从1.4.4版开始！）好吧，我会的。我不知道。到目前为止，它仍然可以工作，其原理与
.on（）
函数相同。如果jquery的网站让这一点变得更加明显，那就好了，除了将其标记为“弃用”之外，请阅读您添加的，以了解为什么
live
被弃用。根据该链接
，从jquery 1.7开始，.live（）方法被弃用。
-而不是您所说的1.4.4。如果我从1.4.4开始就不知道这一点，我会感到惊讶。当我说他们应该让它更明显时，我说的可能是页面顶部的一个黄色框，提醒你不要再使用这个功能。一行字也没写到一半。一旦我理解了文档，我就不会养成重读文档的习惯。：）也许jQuery应该
console.log（'这是去擦洗的'）
用于所有去擦洗的函数。他们可以将其从缩小版中删除。。。那太酷了。
$("#dataTable tbody").on("click", "tr", function(event){
    alert($(this).text());
}); 

live: function( types, data, fn ) {
        jQuery( this.context ).on( types, this.selector, data, fn );
        return this;
    }

delegate: function( selector, types, data, fn ) {
        return this.on( types, selector, data, fn );
    }