Question

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

我有一个简单的脚本，当用户点击submitResult button时，服务器端返回一个id =“content”的新div，并使用jquery replaceWith()替换旧的。{ / p>

我注意到在更换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>

Answer 1

更改

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

到

$(document).on("click", "#submitResult", function() {

Answer 2

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

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

$('body').on('click', '#submitResult', function() {
    ...

Answer 3

在jQuery中使用.on作为动态元素

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

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

但不推荐使用.live。

Answer 4

使用on代替click。

$(document).ready(function() {
    $("#submitResult").on('click', function() {
        var $result = $("#result").val();
        $.get("e?result=" + $result, handleData);
    });
});

Answer 5

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

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

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

5 个答案: