javascript - 无法更改 a 的文本

Question

我有一个 javascript 函数，它使用 ajax 请求创建许多面板。在请求给我一个有效的 json 后，我像这样填充所有小部件:

function createAllWidgets() {
    var funcid = 'get_widget_info';
    var jqxhr = $.ajax({
        type: 'GET',
        url: 'functions/call_functions.php',
        data: {
            funcid: funcid
        },
        dataType: 'json'
    }).done(function(myData) {

        if (myData == null) {
            alert('something went worng');
        } else {
          var html = '';
          for (var i=0;i<myData.length;i++) {
                html += '<h3 id="' + myData[i].widget_abb_upper + '-EUR" class="text-primary counter m-t-10">0</h3>'
                     +  '<h3 id="' + myData[i].widget_abb_upper + '-USD" class="text-primary counter m-t-10">0</h3>';
            }
            $('#widgets').html(html);
        }
    })
    .fail(function() {alert('something went worng');}); 

}

我有另一个函数可以更改小部件中某些 div 对象的 .text():

function setWidget(priceUSD, priceEUR, widget) {
    $('#' + widget + '-EUR').text(priceEUR);
    $('#' + widget + '-USD').text(priceUSD);
}

由于某种原因，在使用ajax填充时无法找到/使​​用id。当小部件不是使用 ajax 创建的(而是在静态 html 中)时，它确实可以工作..

编辑:我在生成小部件的函数中进行了回调:

function createAllWidgets(callback) {
    var funcid = 'get_widget_info';
    var jqxhr = $.ajax({
        type: 'GET',
        url: 'functions/call_functions.php',
        data: {
            funcid: funcid
        },
        dataType: 'json'
    }).done(function(myData) {

        if (myData == null) {
            alert('something went worng');
        } else {
          var html = '';
          for (var i=0;i<myData.length;i++) {
                html += '<h3 id="' + myData[i].widget_abb_upper + '-EUR" class="text-primary counter m-t-10">0</h3>'
                     +  '<h3 id="' + myData[i].widget_abb_upper + '-USD" class="text-primary counter m-t-10">0</h3>';
            }
            $('#widgets').html(html);
        }
    })
    .fail(function() {alert('something went worng');}); 

}

然后我新建了一个函数来调用上面两个函数:

function initStart() {
    createAllWidgets(function() {
        setWidget(1,1,'widget1');
    });
}

但这仍然不起作用..

Answer 1

ajax 是异步的，这意味着 done 处理程序将在函数返回后调用。您添加回调的解决方案不起作用，因为您尚未调用它。

如果您仍想使用回调，请添加以下内容:

$('#widgets').html(html); // This is yours
callback();               // <- Add this

更好的方法是使用 jqXHR 事件 - 就像完成:

function initStart() {
    createAllWidgets().done(function() {
        setWidget(1,1,'widget1');
    });
}