Question

如果我理解jQuery正确链接列表中的第一个方法执行，并且必须在下一个方法执行之前完成。因此，我有以下

$.fn.reportZebraStriper = function(options) { 
    console.log('reportZebraStriper()');
    return true;
}

//onDom ready events
$(document).ready(function(){

    $("#oom_display_options select")
      .on("change", function(event){
          $('#OOM_vs_Logged').loadUrl(//ajax method call in the global site.js file//);})
      .reportZebraStriper();


})

在初始页面加载时，所有内容都按预期执行，我的控制台从$ .fn.reportZebraStriper（）获取打印输出。我的问题出现了，当我在“oom_display_options”下拉列表中更改了ajax被触发时，内容DIV被重新加载，但是reportZebraStriper（）不会在之后触发。

我在这里做错了什么？

编辑1：其中loadURL（）方法定义。它实际上只是jQ内置的.ajax（）方法的包装器;当ajax正在执行时，它会显示一些动画，等等。

$.fn.loadUrl = function(url, dataAjax) {
    var target = this;
    target.addBlockLoadingDiv();

    return $.ajax({
        type: "POST",
        url: url,
        data: dataAjax,
        success: function(data) {
            if (data) {
                target.html(data);
            } else {
                target.text("Unable to display requested data, sorry.");
            }
        },
        error: function(err) {
            target.html(err.response);
        }
    });
};

jQ的load（）方法似乎立即调用执行回调方法（除非我做错了）;这个不幸。是我们需要的。

编辑2：当ajax调用的'complete：'被触发时，发出一个特定于此logi的ajax调用它调用$（）。reportZebraStriper（）方法。不是我想要的决议，但它有效。

Answer 1

尝试$("#oom_display_options")在按ID选择时，您不需要向选择器添加任何类型的容器

Answer 2

在为ajax调用触发下一个方法之前，jQuery不会等待先前的方法执行。由于它们是异步的，它将触发ajax，然后继续执行链中的下一个方法。

如果要在ajax调用后触发函数，请使用进行调用的方法的回调。这看起来像$(selector).load(target_url, callback)，其中callback将被您在ajax完成后要触发的行为所取代。

有关详细信息，请查看.load() jQuery API Documentation

中的回调部分

Answer 3

请尝试

$.fn.reportZebraStriper = function(options) { 
    console.log('reportZebraStriper()');
    return true;
}

//onDom ready events
$(document).ready(function(){

    $("#oom_display_options select")
      .on("change", function(event){
          $('#OOM_vs_Logged').loadUrl(/*ajax method call in the global site.js file*/).then(reportZebraStriper);
      });
});

其中loadUrl函数如下所示：

function loadUrl() {
    return $.ajax({
                      url: // whatever
    });
}

[edit]通常我会在jsfiddle上查看这些内容，在上面更新

Answer 4

你可能想做这样的事情：

$.fn.reportZebraStriper = function(options) { 
    console.log('reportZebraStriper()');
    return true;
};

//onDom ready events
$(document).ready(function(){

    $("#oom_display_options select").on("change", function(event){
          $('#OOM_vs_Logged').load(
                "http://jsbin.com/ujabuf/1/edit",
                $.fn.reportZebraStriper()
          );
    });

});

工作示例，您可以在http://jsbin.com/ujabuf/1/edit

看到

Answer 5

我想你可能只需要一个关于Javascript同步和异步的初级读物。

Javascript执行单线程并在运行时冻结页面。这意味着在Javascript完成运行之前，您对页面所做的更改都不会呈现，并且在现有Javascript运行时触发的任何事件都要等到当前正在运行的Javascript完成。事件可能是点击或AJAX呼叫完成。

正如你所指出的那样，jQuery在大多数（但不是全部）调用结束时返回自身（这并没有很好地记录）。你用来绑定到'change'事件的.on（）调用返回jQuery对象，所以它们是等价的：

$("#oom_display_options select").on("change", function(){})
  .reportZebraStriper();

和

var oom = $("#oom_display_options select");
oom.on("change", function(){});
oom.reportZebraStriper();

所以实际发生的是创建了一个指向#oom_display_options标记中所有选择标记的jquery对象。然后运行.on（）调用，它将onchange事件分配给所有选择标记 - 每次更改时运行的代码都在传递给.on（'change'，...）调用的函数中。最后，reportZebraStriper（）针对jquery对象运行，它碰巧没有什么有趣的。

由于事件处理程序中没有.reportZebraStriper（），因此它不是更改选择框时运行的代码的一部分。

很难说你对.loadUrl（）的调用是什么，因为那不是基本jquery的一部分 - 也许你或与你一起工作的人扩展了.load（）。

Answer 6

结果证实JS promise对象就是我想要的。我等待一个promise.success调用然后运行所需的等待ajax完成的jQ逻辑。

链jQ方法

6 个答案: