Ajax调用和追加，不能选择追加的内容或做任何事情

ajax calls and append, cannot select appended content or do anything

本文关键字：追加 任何事 选择 调用 不能 Ajax      更新时间：2023-09-26

这段代码有两个问题。

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

2 dpUniSlider不工作，因为它没有看到通过ajax调用创建的li。如果我把它移动到成功消息，它工作得很好，但外部函数不。问题是，如果我把它包含在ajax成功它会被调用几次，因为它是在一个循环

//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
});

要处理多个并行异步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);
    }
});

我相信您可以使用jQuery延迟对象来处理多个并行异步ajax调用，其中您希望在它们都成功完成后执行某些操作。

试试这个:

$(function() {
    var LEVELS = 2,
        $container = $('.slides_container'),
        deferreds = []; // This will hold the deferred objects.
    // This function returns a deferred object.
    function getViewAndReturnDeffered(level) {
        return $.ajax({
            url: 'actions.php',
            type: 'GET',
            data: 'show_level=' + level,
            cache: false,
            success: function(data) {
                var $currentView = $container.find('[data-level="' + level + '"]'),
                    $newView = '<li data-level="' + level + '">' + data + '</li>';
                if ($currentView.length > 0) {
                    $currentView.replaceWith($newView);
                } else
                    $container.append($newView);
                }
            }
        });
    }
    for (var i = 1; i <= LEVELS; i++) {
        // Put the deferred objects in the array.
        deferreds.push(getViewAndReturnDeffered(i));
    }
    // The function passed to `.done()` will execute when all the deferred
    // objects have completed successfully.
    $.when.apply($, deferreds).done(function() {
        var unislider = $container.dpUniSlider({
            //loop: false,
            draggable: false
        });
    });
});

在.container里面有<meta></meta>吗?可能不会。使用

$(container + ' li[data-level="' + level + '"]')
相关文章：