Javascript如何确保显示JQuery .append

Question

我有以下 javascript 函数，它使用 JQuery 中的 .append 。但是，只有在函数开头添加 alert() 时它才有效。我发现这种行为的原因是 AJAX 的异步工作方式造成的。

如何确保此函数按需要显示 html？

this.printJSON = function(id) {
    //alert(id);
    $(id).append('<button id="#store">store</button>');
    for(key in params) {
          $(id).append('<p '...'</p>');
    }
};

我的整个类(class)，是这样称呼的:

params.parseJSON();
params.printJSON("#showdata");

function Parameters(parametersFile) {
    //private stuff
    var paramFile = parametersFile;
    var params = {};

    //public stuff
    this.parseJSON = function() {
        $.getJSON('inputFileParametersJSON.txt', function(json) {

        for(var param in json) {
            for(var key in json[param]) {
                if(json[param].hasOwnProperty(key)) {
                    params[key] = {
                    filterIdentifier : json[param][key].filterIdentifier,
                    paramIdentifier : json[param][key].paramIdentifier,
                    param : json[param][key].param
                        };
                    }
                 }

          }
       });
    };

    this.printJSON = function(id) {
            alert("");
        $(id).append('<button id="#store">store</button>');
        for(key in params) {
                $(id).append('<p id="' + key + '"> filterIdentifier: ' + params[key].filterIdentifier + '<br /> paramIdentifier: ' + params[key].paramIdentifier + '<br /> param= <input type="text" id="' + key + '"name="param" value="' + params[key].param + '"/></p>');

                        //alert(params[key].filterIdentifier);
        }
    };

}

Answer 1

看来您可能需要重新评估函数的调用方式。您真的需要单独给他们打电话吗？我将 parseJSON 重命名为 getJSON

function Parameters(parametersFile) {
    // ...

    var printJSON = function(id) {
        $(id).append('<button id="#store">store</button>');
        for(key in params) {
            // ...
        }
    };

    //public stuff
    this.getJSON = function(id) {
        $.getJSON('inputFileParametersJSON.txt', function(json) {

        // process results ...

          printJSON(id);
       });
    };

}

这样您就可以简单地调用 foo.getJSON('#someid') 并且在处理请求之前它不会追加。