2

如果我正确理解 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.reportZebraStripper() 获取打印输出。当我在“oom_display_options”下拉菜单中进行更改时，我的问题出现了，ajax 被触发，内容 DIV 被重新加载，但是 reportZebraStripe() 没有触发后记。

我在这里做错了什么？

编辑 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:' 被触发时它调用 $().reportZebraStripper() 方法。不是我正在寻找的解决方案，但它有效。

4

6 回答 6

0

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

于 2013-03-13T19:12:51.380 回答
0

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

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

有关更多信息，请查看.load() jQuery API 文档中的回调部分

于 2013-03-13T19:19:04.653 回答
0

请试试 

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

[编辑] 通常我在 jsfiddle 上检查这些，在上面更新

于 2013-03-13T19:29:38.453 回答
0

你可能想做这样的事情：

$.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

于 2013-03-13T19:33:15.780 回答
0

我认为您可能只需要有关 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();

所以实际发生的是创建了一个 jquery 对象，该对象指向 #oom_display_options 标记中的所有选择标记。然后 .on() 调用运行，它为所有选择标记分配一个 onchange 事件 - 每次更改都会运行的代码在传递给 .on('change', ...) 调用的函数中。最后，reportZebraStripper() 对 jquery 对象运行，它碰巧没有做任何有趣的事情。

由于您在事件处理程序中没有 .reportZebraStripe() ，因此它不是更改选择框时将运行的代码的一部分。

很难说你对 .loadUrl() 的调用做了什么，因为这不是基本 jquery 的一部分——也许你或你一起工作的人已经扩展了 .load()。

于 2013-03-14T21:52:36.763 回答
0

原来 JS 承诺对象是我想要的。我等待一个 promise.success 调用，然后运行需要等待 ajax 完成的所需 jQ 逻辑。

于 2013-06-04T19:45:52.633 回答