使用 jQuery ReplaceWith 替换 DIV 的内容仅在第一次工作

Question

我使用以下 jQuery 来提取新数据并替换 DIV listdata 的内容

$(function(){
$('.refresh').click(function(event) {
    event.preventDefault();

    $.ajax({
        url: "_js/data.php",
        success: function(results){
            $('#listdata').replaceWith(results);
        }
    });
});
});

该脚本由页面上的众多链接触发，例如：

<a href="" id="update1" class="refresh">Update 1</a>
<a href="" id="update2" class="refresh">Update 2</a>

由于某种原因，该脚本仅在第一次单击链接时起作用。后续单击不会刷新数据。

我见过各种修复方法，但没有任何效果。有什么建议吗？

Answer 1

在我看来，您的问题在于使用 replaceWith 。

您将在第一次调用 replaceWith 时删除与 $('#listdata') 匹配的元素，因此后续刷新无法找到数据应该在的位置放置在文档中。

你可以尝试类似的东西

 $('#listdata').empty();
 $('#listdata').append(results);

或像这样链接

 $('#listdata').empty().append(results);

Answer 2

如果您使用 replaceWith()，您将完全用一个全新的元素替换 #listdata。

如果 data 不是类似于

的内容，则 #listdata 会在replaceWith()。我想你应该使用 html() 来代替。

Answer 3

您需要将链接上的 href 更改为 ...。这可以防止单击链接时浏览器刷新。

如果您这样做，您还需要在点击处理程序末尾添加“return false”以防止冒泡。

Answer 4

尝试：

$('a.refresh').live('click', function(e) {
    e.preventDefault();

    $.ajax({
        url: '_js/data.php',
        success: function(data) {
            $('#listdata').empty().html(data);
        }
    });
});

---

如果 .refresh 锚点位于 #listdata 元素内，则委托是一个更优化的解决方案：

var list = $('#listdata');

list.delegate('a.refresh', 'click', function(e) {
    e.preventDefault();

    $.ajax({
        url: '_js/data.php',
        success: function(data) {
            list.empty().html(data);
        }
    });
});