3

为什么jquery选择器不适用于新替换的标签。

我有一个简单的脚本，当用户单击时submitResult button，服务器端返回一个 id="content" 的新 div，我使用 jqueryreplaceWith()替换旧的。

我注意到id="content"元素被替换后，下次单击 submitResult 时，它不会将数据发送到服务器端。仅供参考，这个 submitResult id 在新替换的元素内。

谁能告诉我如何刷新替换 html 标记，从而让$("#submitResult").click(xxx)再次工作？

谢谢

<html>
<head>
<script src="js/jquery/jquery-1.7.2.min.js"></script>
<script>
    function handleData(data, status) {
        $("#content").replaceWith(data);
    };

    $(document).ready(function() {
        $("#submitResult").click(function() {
            var $result = $("#result").val();
            $.get("e?result=" + $result, handleData);
        });
    });
</script>
</head>

<body>
        <div id="content">
            <div class="resultbox">
                    <input id="result" type="text" value=""></input>
                    <input id="submitResult" type="button" value="Submit"></input>
            </div>
        </div>

        <!-- other content -->

</body>
</html>
4

5 回答 5

9

改变

$("#submitResult").click(function() {

到

$(document).on("click", "#submitResult", function() {
于 2013-03-16T05:58:18.083 回答
2

$("#submitResult")返回调用选择器时存在的元素。

您需要使用事件委托语法.on()将事件处理程序附加到固定的父元素并将其委托给子元素：

$('body').on('click', '#submitResult', function() {
    ...
于 2013-03-16T05:58:52.950 回答
1

使用 .on 表示 jQuery 中的动态元素

jQuery 事件仅适用于页面加载时加载的元素。

如果您想对动态出现的元素执行事件，我们需要使用.live或.on

但.live已弃用。

于 2013-03-16T06:01:12.040 回答
0

使用on而不是click.

$(document).ready(function() {
    $("#submitResult").on('click', function() {
        var $result = $("#result").val();
        $.get("e?result=" + $result, handleData);
    });
});
于 2013-03-16T05:57:49.730 回答
0

当我们使用 ajax 返回 html 内容时，这是一个常见的情况。当 $(document).ready 时，您将处理程序绑定到旧提交按钮，但对于新返回的按钮，没有任何内容绑定到它。所以你可以在ajax返回后显式调用事件绑定js，或者只是简单地将标签放在内容div中。

这可以确保事件绑定在 ajax 返回后再次运行。

于 2013-03-16T06:07:06.767 回答