javascript - 加载 html 时找不到 html 标签

Question

我能够加载一个简单的 html 文件，但是当我尝试在加载的 html 中查找元素时，javascript 找不到该元素。在 IE10 中，会显示加载的 html，但标签不会更改。在 Chrome 中，加载不起作用。我是否加载不正确？有没有办法获取该元素的引用？

progress.html 中只有一行 id 为 "progressLabel" 的标签。和“Loading... ”的innerText，就是这样。

我正在创建一个模式对话框，然后加载，然后尝试获取进度标签:

$("#progressbarDiv").dialog({
    resizable: false,
    height: 240,
    width: 500,
    modal: true,
    closeOnEscape: false,
    //disabled: true,
    open: function (event, ui) {
        // Hide close button 
        $(this).parent().children().children(".ui-dialog-titlebar-close").hide();
    },
    buttons: {
        "Ok": {
            text: "OK",
            id: "myOKButton",
            click: function () {
                $(this).dialog("close");
            }
        } 
    }
});
$('#progressbarDiv').load('progress.html');
var testThis = $('#progressLabel');
testThis.text = "...Synchronizing data, please wait...";

Answer 1

要访问 AJAX 加载元素中的 HTML，您需要在回调函数中执行 Javascript。

$('#progressbarDiv').load('progress.html',function(){
    // Your script was setting $.text = , but it's a function.
    $('#progressLabel').text("...Synchronizing data, please wait...");
});

$.load(url, callback) 是异步的，因此当 $.load 返回时不会加载内容。 回调是您知道$.load已完成处理的方式

您可以在脚本中的任何位置使用 $('#progressLabel').text("...正在同步数据，请稍候...");。如果是一个足够小的项目，那就没问题。如果您关心维护，则应该构建代码，这样就不需要从任何地方全局访问该 div。至少创建一个可以调用的函数来执行此操作，也许它可以按需加载它？

/**
 * A simple but slightly better way to set the text from anywhere. 
 * Lazily fetches the progress HTML.
 */
function setProgressString(str) {
    function setText() {
        $('#progressLabel').text(str);
    }

    if ($('#progressLabel').length === 0) {
        $('#progressbarDiv').load('progress.html', setText);
    } else {
        setText();
    }    
}

// Use anytime
setProgressString('...Synchronizing data, please wait...')';