加载到 div 后的 Jquery Ajax 错误答案

【问题标题】：Jquery Ajax error after loading intoa div加载到 div 后的 Jquery Ajax 错误
【发布时间】：2012-07-18 10:12:02
【问题描述】：

假设我有一个名为 index.php 的页面，它包含一个名为 divContent 的 div 元素，其中包含一个名为“msg”的按钮和另一个名为“show”的按钮。

当我加载 index.php 时，两个按钮显示良好。我在我的页面上添加了 jquery。当点击我的“味精”按钮时，它会显示“成功”味精

alert("成功");

。它的工作方式就像当我单击显示按钮（在 divContent 之外）时，它会通过 ajax 技术将另一个页面内容加载到我的 divContent 中。

$('#msg').click(function(e) {
    alert("successful");
}); 
} //Whilst editing formatting - extra closing brace

$('#show').click(function(e) {
    $.ajax({
        type: "GET",
        url: "test.php",
        success: function(msg){
            $('#divContent').html(msg);
        }
    });
    e.preventDefault();
});


test.php
--------
    <input type="button" id="msg" />

test.php 包含一个与 index.php 中的 msg 按钮相同的按钮。我的问题是当加载 index.php 时，单击 msg 按钮它显示成功的 msg 但是当单击 show 按钮时它将 test.php 的包含加载到 divContent 并单击 msg 按钮它不显示“成功”消息。有什么问题

【问题讨论】：

在 IE 开发者工具中Console 中是否显示任何错误？

标签： jquery ajax

【解决方案1】：

这是因为您将单击绑定到所有现有的#msg 元素，它不适用于绑定时不存在的任何元素。所以当你加载新内容时，它没有绑定点击，你需要重新绑定它。

success: function(msg){
   $('#divContent').html(msg);
   $('#msg').click( .... );
}

或者，使用 .on() 方法：

找到两个 #msg 按钮的祖先元素，并使用 .on 将事件绑定到它

$('.parent').on('click', '#msg', function(){
   alert("whatever");
});

这将确保任何作为 .parent 子级的#msg，无论它是何时创建的，都会有一个点击事件。

来源：http://api.jquery.com/on/

【讨论】：

谢谢。但我写这个是为了演示目的 bcoz 目的是相同的，但代码是其他的。我想在单击提交按钮时绑定表单元素提交事件。如何使用 ON 方法绑定我的表单元素。
只有在内容已经显示在页面上之后，您才需要绑定您的点击。这意味着在你的成功函数中，在$('#divContent').html(msg); 之后
Submit 不适用于 ON 方法，因为一些较旧的浏览器不会通过 DOM 冒泡提交事件。所以建议在加载元素时绑定点击。
好的。但是我将父级设置为主 div 元素和事件单击表单元素上的成功功能但不起作用。任何帮助

【解决方案2】：

您的第一次点击函数有一个额外的右大括号。

$('#msg').click(function(e) {
    alert("successful");
}); 
} //<<Here

【讨论】：