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

【问题标题】：How do I trigger a function to execute after external HTML is loaded?加载外部 HTML 后如何触发函数执行？
【发布时间】：2012-10-18 20:57:44
【问题描述】：

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>

另外，我知道 jQuery 1.7+ 不推荐使用 .live()，我猜使用 .on() 的解决方案会类似

谢谢！

【问题讨论】：

标签： html load external jquery jquery-on

【解决方案1】：

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

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

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

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

【讨论】：

谢谢，我知道这将是一个简单的答案，但我想不通

【解决方案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.");
});

});

【讨论】：