javascript - 使用 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.

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

你可以尝试类似的东西

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

或像这样被锁住

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

Answer 2

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

If datais not something like <div id="listdata"></div>then#listdata在之后消失replaceWith()。我想你应该html()改用。

Answer 3

尝试：

$('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);
        }
    });
});

Answer 4

您需要将链接上的 href 更改为 <a href="#">...</a>。当您单击链接时，这可以防止浏览器刷新。

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