Javascript 链jQ方法

如果我正确理解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\u display\u options”下拉列表中进行更改时，我的问题就出现了。ajax被触发，content DIV被重新加载，但reportZebraStriper（）不会触发afterwords

我做错了什么

---

编辑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：

---

为此logi创建了特定的ajax调用，当ajax调用的“complete:”被激发时，它将调用$（）.reportZebraStriper（）方法。不是我想要的解决方案，但它起了作用。

尝试

$（“#oom_display_options”）

当通过id选择时，不需要向选择器添加任何类型的容器。

jQuery不会等待前一个方法执行，然后为ajax调用触发下一个方法。因为它们是异步的，所以它将启动ajax，然后进入链中的下一个方法

如果要在ajax调用后启动函数，请使用调用方法的回调。这将类似于

$（选择器）.load（target\u url，callback）

，其中

callback

将替换为ajax完成后要激发的行为

有关更多信息，请查看中的回调部分，请重试

$.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
    });
}

---

[编辑]通常我会在上面更新的JSFIDLE上检查这些选项，您可能希望执行以下操作：

$.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()
          );
    });

});

---

您可以在以下位置看到一个工作示例：

我认为您可能只需要了解Javascript同步和异步的入门知识

Javascript执行单线程并在页面运行时冻结页面。这意味着，在Javascript运行完成之前，您不会对页面呈现进行任何更改，而在现有Javascript运行期间触发的任何事件都将等待当前运行的Javascript完成。事件可能是单击或AJAX调用

正如您所注意到的，jQuery在大多数（但不是所有）调用结束时返回自身（这方面的文档记录不是很好）。用于绑定到“change”事件的.on（）调用返回jQuery对象，因此它们是等效的：

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

及

因此，实际发生的是创建一个jquery对象，该对象指向#oom_display_options标记中的所有select标记。然后运行.on（）调用，该调用为所有select标记分配一个onchange事件-将在每次更改上运行的代码位于传递给.on（'change'，…）调用的函数中。最后，对jquery对象运行reportZebraStriper（），该对象碰巧没有做任何有趣的事情

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

---

很难说你对.loadUrl（）的调用是做什么的，因为这不是基本jquery的一部分——也许你或你的同事已经扩展了.load（）。

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

您所说的“内容DIV被重新加载”是什么意思？我认为提供更多细节会很有用。-Body--content\u div content div被清除并用ajax获取的数据重新填充，是content div中的select？否。下拉列表不在重新加载的DIV中。我的逻辑中的loadUrl（）是一个用户定义的jQ方法。你的负载是多少？旁注：问题中的loadUrl（）已经可以接受2个参数。load（）不起作用。我们在ajax调用（加载动画等）之前执行的逻辑很容易更改。但是，回调似乎是在返回ajax数据/结果之前执行的。FireBug错误：SyntaxError:missing）after参数列表。离子[this.selectedIndex].value）；}）。然后（reportZebraStriper（）；）指向最后一个；性格删除它会产生一个未定义的报告，尽管它与您的答案一致。啊，我的错。如果我说loadURL‘可以’接受两个参数，但只需要第一个参数（URL），那么编辑回答会有所帮助吗？是的，您可以在loadURL中放置任意数量的参数。但是，你能解释一下最后的评论吗？我不太明白它的contextloadURL（）是一个自定义定义的方法。它的使用使我们不必反复重写jQ$.ajax（）方法。我们传入URL（！st param）和可选数据（第二个参数）。它执行，并且（希望）返回我们想要的数据。华？选择是有效的，问题是在ajax重新填充容器DIV之后调用方法。您的回答，我已经不知道了…它正在ajax状态返回之前执行回调。Boo:（.loadUrl（）只是jQuery的&.ajax（）的一个包装方法。不过，我们没有使用（simplier）.load（）来替换内容数据（还没有）。不过，感谢您提供的其他信息。了解这些信息很好。

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