0

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

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

警报（“成功”）；

. 它的工作方式就像当我单击显示按钮（在 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 按钮它不显示“成功”消息。问题是什么

4

2 回答 2

0

这是因为您将单击绑定到所有现有的#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/

于 2012-07-18T10:19:13.300 回答
0

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

$('#msg').click(function(e) {
    alert("successful");
}); 
} //<<Here
于 2012-07-18T10:19:18.890 回答