javascript - ajax调用并附加，无法选择附加内容或执行任何操作

Question

这段代码有两个问题。

1 $(container + ' meta[data-level="' + level + '"]').length == 0 始终为零我知道这一点是因为我创建了额外的调用 create_views(1); ，该调用不应添加，但无论如何都会附加。

2 dpUniSlider 不起作用，因为它看不到通过 ajax 调用创建的 li。如果我将其移至成功消息中，它可以正常工作，但外部函数则不能。问题是，如果我将它包含在 ajax success 中，它会被调用几次，因为它在循环下

//Show levels using ajax, before slider is activated

function create_views(level) {
  $.ajax({
    url: "actions.php",
    type: "GET",
    data: "show_level=" + level,
    cache: false,
    success: function (data) {
      var view = '<li data-level="' + level + '">' + data + '</li>';
      var container = ".slides_container";
      if ($(container + ' meta[data-level="' + level + '"]').length == 0) {
        $(container).append(view);
      } else { //check if element exists, if yes overwrite it.
        //$(container + ' meta[data-level="' + level + '"]').replaceWith(view);
        alert("Exists");
      }
    }
  });
}
 //Loop through all levels and display views
 //level count can be rewritten to come from DB and not be hardcoded like now
var levels = 2;
for (var i = 1; i <= levels; i++) {
  create_views(i);
} // for loop
create_views(1); //test, delete this
 //Activate slide
var unislider = $(".slides_container").dpUniSlider({
  //loop: false,
  draggable: false
});

Answer 1

为了处理多个并行异步 ajax 调用(您希望在它们全部完成后执行某些操作)，您可以保留一个计数器并检查成功回调以查看最后一个 ajax 调用何时成功。

它看起来像这样:

$(function() {
    var TOTAL_TASKS = 2,
        completedTasks = 0;

    function performAjaxTask(taskNumber) {
        $.ajax({
            url: url,
            type: 'GET',
            data: data,
            cache: false,
            success: function(data) {
                // Process the data

                completedTasks++;

                if (completedTasks == TOTAL_TASKS) {
                    // Perform actions that need to wait until all
                    // ajax calls have returned successfully.
                }
            }
        });
    }

    for (var i = 1; i <= TOTAL_TASKS; i++) {
        performAjaxTask(i);
    }
});