jQuery刷新特定的div答案

【问题标题】：jQuery refreshing specific divjQuery刷新特定的div
【发布时间】：2013-11-20 02:41:33
【问题描述】：

所以我有一个可排序的li 列表，其中显示了一系列页面。

当我对它们进行排序时，我的 jQuery 代码会调用一个 php 页面来更新我的页面在数据库中的顺序。

在与列表相同的页面上，它按页面顺序显示页面，但我希望能够在我的数据库更新后立即自动更新此顺序，而无需实际刷新页面。

所以基本上，秘密地“刷新”pageContainer div。

最好的方法是什么？

<div id="pageContainer">
   <!-- include() a series of pages in the right order from database -->
</div>

 $("#pageContainer").sortable({
    stop : function(event, ui){
        var postData = $(this).sortable('serialize');
        var url = "saveOrder.php";
        $.ajax({
            type: "POST",
            url: url,
            data: postData,
            success: function(data) { $('#pageContainer').html(data);  }
        });
    }
});

编辑所以一个简单的$('#pageContainer').html(data); 成功了，但我的$('form').on('input propertychange change') 停止了工作。如果有人想看，修复在 this page 上。

【问题讨论】：

标签： javascript php jquery jquery-ui-sortable

【解决方案1】：

如果你在 saveOrder.php 页面中回显出你想要的 HTML，那么剩下的就很简单了：

$.ajax({
    type: "POST",
    url: url,
    data: postData,
    contentType: 'html',
    success: function(data) { 
        $('#pageContainer').html(data);
    }
});

根据您的 jQuery 版本（v1.5+），您可能希望利用 $.ajax 返回的 jQuery Promise。您的代码将更改为：

$.ajax({
    type: "POST",
    url: url,
    data: postData,
    contentType: 'html'
}).done(function(data) {
    $('#pageContainer').html(data);
});

这允许您链接回调并将您的设置与回调函数分开。例如，您可以这样做：

...
}).done(function(data) {
    $('#pageContainer').html(data);
}).fail(function() {
    alert('failed :(');
}).always(function() {
    alert('done!');
});

【讨论】：

这是一个很好的例子，但我的数据中有一个表单，我的 jquery $('form').on('input propertychange change', function() 停止工作，有什么想法吗？

【解决方案2】：

在 php 页面上创建您的排序内容，只需将该结果添加到适当的 div。

所以基本上..

$("#pageContainer").sortable({
    stop : function(event, ui){
        var postData = $(this).sortable('serialize');
        var url = "saveOrder.php";
        $.ajax({
            url: url,
            data: postData,
            success: function(data) {  
            jQuery("#pageContainer").html(data);}
        });
    }
});

【讨论】：

这是一个很好的例子，但我的数据中有一个表单，我的 jquery $('form').on('input propertychange change', function() 停止工作。有什么想法吗？
jquery 的 1.9+ 是哪个版本？控制台有什么错误吗？
1.9+，控制台中没有错误。每次调用表单时我都有一个日志，一旦我对 html 进行排序和刷新，它就会完全停止调用它
试试这个，$('form input').on('propertychange', function(){}) 这也可能有帮助stackoverflow.com/questions/6488171/…
我知道如何使用它，但它只在我更新 HTML 之前有效，而不是之后

【解决方案3】：

你会让你的 ajax 调用返回 html 像

dataType: 'html'

然后在你的成功函数中你会做

$('#pageContainer').html(data);

【讨论】：

【解决方案4】：

用“delegate”代替“on”怎么样？

$('#pageContainer').delegate('form', 'input propertychange change', function(){...;})

【讨论】：