JQuery使用.load()替换整个DIV

Question

我想<div>在jQuery UI模式对话框的结束时刷新一个.

我的代码是:

var dialog = jQuery('#divPopup').dialog({
    autoOpen: false,
    height: 450,
    width: 650,
    modal: true,
    open: function(event, ui) {
        jQuery('body').css('overflow', 'hidden');
    },
    close: function(event, ui) {
        jQuery('#divPopup').dialog('destroy').remove();
        jQuery("#bodyId").load("http://www.xyz.com/ #bodyId");
    }
});

但不是替换它,而是<div>在旧的内部添加新内容<div>:

<div id="bodyId">
    <div id="bodyId">
        New Response
    </div>
</div>

我想bodyId用新的div 替换旧的div bodyId.

Answer 1

尝试替换这个:

jQuery("#bodyId").load("http://www.xyz.com/ #bodyId");

... 有了这个:

jQuery("#bodyId").load("http://www.xyz.com/ #bodyId > *");

这是有效的,因为您可以在URL后使用任何选择器.通过使用#bodyId > *而不仅仅是#bodyId,你匹配div 内的所有东西,而不是div本身.

你需要这个,因为.load()不会替换元素; 它会将AJAX调用的结果追加到元素中.

或者,您可以使用.get()加载数据并手动执行选择,如下所示:

$.get('http://www.xyz.com/', function(data) {
    var newContent = $(data).find('#bodyId').children();
    $('#bodyId').empty().append(newContent);
});

这两种方法的例子都在网上:http://jsfiddle.net/PPvG/47qz3/