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

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 为“success”或“notmodified”时），.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.");
});

});