Question

我正在使用jQuery插件，它从网址获取数据，在div中提取，计算和写入一些数据。

我想将此div内容复制到另一个div，当这些功能发挥作用时。

例如：

$("#div1").myfunction(); // it gets and calculates data and adds to #div1 . it needs 2-3 seconds to be done
var contents = $("#div1").html(); // when myfunction() done, copy contents
$("#div2").html(contents);

当我运行该代码时，我在#div2中没有新内容。

Answer 1

你需要让myfunction获取一个请求完成后执行的回调参数

function myfunction(cb)
    $.ajax({
        type: "get",
        url: "page.html",
        success: function(data){
            $("#div1").html(data);
            if(typeof cb === 'function') cb();
        }
    });
}

myfunction(function(){
    $("#div2").html($("#div1").html());
});

Answer 2

您只需要输入以下内容：

$("#div2").html($("#div1").html());

成为myFunction中实现的ajax代码的成功回调，以确保在客户端收到响应并将其插入DOM后进行操作。

Answer 3

Ajax回调（例如success）将在jQuery 1.8中弃用。相反，您可以使用jQuery的deferred对象来运行（或撤消）在执行之前需要一个或多个条件的操作。

var successFunction = function() {
  var contents = $("#div1").html();
  var newElement = $("<div id=div2></div>").html(contents);
  $("body").append(newElement);
}

var failedFunction = function() {
  // reset element or undo last change
  window.alert("Update Failed");
}


$.when(
  $.ajax(countParams),
  doCalculate()
).then(
  successFunction(),
  failedFunction()
);

Creating Responsive Applications Using jQuery Deferred and Promises

Answer 4

如果您是编写插件的人，则应该将其硬编码到AJAX回调函数中，或者允许使用选项传入回调函数。

如果您无法控制该插件，则必须不断查询div以查看其是否已更新：

var oldHTML = $("#div1").html(),
    counter = 0;

$("#div1").myfunction();

copyHTML();

function copyHTML()
{
    var newHTML = $("#div1").html();

    // we don't want this function to run indefinitely
    if (++counter > 15) return;

    if (newHTML == oldHTML)
        setTimeout(copyHTML, 1000);
    else
        $("#div2").html(newHTML);
}

当一个功能的工作完成

4 个答案: