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替换为一个全新的元素。

如果data不是<div id="listdata"></div>，那么#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更改为＆lt; a href =“＃”＆gt; ...＆lt; / a＆gt;。这可以防止浏览器在您单击链接时刷新。

如果你这样做，你也会想在点击处理程序的末尾加上“return false”以防止冒泡。

使用jQuery replaceWith仅在第一次使用时替换DIV的内容

4 个答案: