Question

JS：

$(document).ready(function(){

    $("#loader").load("external.html");

    $("#buttonClickText").live('click', function() {
        $("#buttonClickText").text("Text changed after button click.");
    });

    // MYSTERY FUNCTION
    $("#pageLoadText").text("Text changed after external HTML was loaded.");
    //

});

外部HTML：

<div id="buttonClickText">
    This text changes when clicked.
</div>

<div id="pageLoadText">
    This text should have changed when external HTML was loaded, but didn't.
</div>

主HTML（仅显示相关标签）：

<div id="loader"></div>

另外，我知道.live（）已被弃用于jQuery 1.7+，我猜这个解决方案类似于使用.on（）

谢谢！

Answer 1

来自http://api.jquery.com/load/：

此方法是从服务器获取数据的最简单方法。它是大致相当于$ .get（url，data，success），除了它是一个方法而不是全局函数，它有一个隐式回调功能。当检测到成功的响应时（即textStatus时）是“成功”或“未修改”）,. load（）设置的HTML内容匹配元素到返回的数据。

只需传递一个函数作为第二个参数。

$('#result').load('ajax/test.html', function() {
  alert('Load was performed.');
});

Answer 2

下面是该问题的解决方案：

$(document).ready(function(){
$("#loader").load("external.html", function()
        {
            $("#pageLoadText").text("Text changed after external HTML was loaded.");
        }
    );

$("#buttonClickText").live('click', function() {
    $("#buttonClickText").text("Text changed after button click.");
});

}）;

如何在加载外部HTML后触发函数执行？

2 个答案: