javascript - 等待使用 jQuery 加载模型数据时 -- 遇到时间差异？

Question

我有一个 MVC 应用程序。我正在尝试使用 jQuery 的负载从服务器加载模型。这工作得很好。我现在尝试在加载所有 View 后运行一些 JavaScript。因此，我通过使用 jQuery .when 来介绍 jQuery 的延迟 promise 功能。

我对此功能的有限理解使我相信下面的两段代码应该以相同的方式运行。不过，在我看来，我的“then”方法执行得太早了。我不知道如何确认这一点。

旧代码(有效):

$('#OrderDetails').load('../../csweb/Orders/OrderDetails', function () {
    $("fieldset legend").off('click').click(function () {
        var fieldset = $(this).parent();
        var isWrappedInDiv = $(fieldset.children()[0]).is('div');

        if (isWrappedInDiv) {
            fieldset.find("div").slideToggle();
        } else {
            fieldset.wrapInner("<div>");
            $(this).appendTo($(this).parent().parent());
            fieldset.find("div").slideToggle();
        }
    });
});

现在，我想扩展它以等待多个加载事件。不过，为了简单起见，我将尝试等待 OrderDetails:

新代码(不起作用):

var onDisplayLoadSuccess = function () {
    console.log("Done!");
    console.log('Fieldset legend:', $('fieldset legend'); //Not all found.
    $("fieldset legend").off('click').click(function () {
        var fieldset = $(this).parent();
        var isWrappedInDiv = $(fieldset.children()[0]).is('div');

        if (isWrappedInDiv) {
            fieldset.find("div").slideToggle();
        } else {
            fieldset.wrapInner("<div>");
            $(this).appendTo($(this).parent().parent());
            fieldset.find("div").slideToggle();
        }
    });
};

var onDisplayLoadFailure = function () {console.error("Error.");};

$.when($('#OrderDetails').load('../../csweb/Orders/OrderDetails')).then(onDisplayLoadSuccess, onDisplayLoadFailure);

我没有看到任何错误。我看到“完成”打印到控制台，但时间似乎不同。在调用when/load/then之前存在于页面上的图例已应用了单击事件，但是从OrderDetails返回的 View 中加载的图例没有绑定(bind)了单击事件他们。

相比之下，旧代码的成功函数将点击事件适本地应用于所有图例。为什么会出现这种情况？

Answer 1

要捕获绑定(bind)事件后动态添加的 DOM 元素上的事件，您需要委托(delegate)它 (http://api.jquery.com/on/)。

类似于:

$('fieldset').on('点击', '图例', function(){