0

tl;dr：在将内容加载到 DOM 之后，jQuery 最早可以访问添加的元素是什么时候？

我正在重构我现有的 JavaScript。目前，我有将内容加载到对话框中的模块，并且在回调中，加载对话框后，负责将事件附加到对话框上的元素。

我不喜欢加载对话框的模块知道加载的对话框元素的详细信息。相反，我现在采用的方法是加载对话框的模块仅执行此操作。

现在附加事件的责任落在对话框本身上。我这样做的方法是在加载到对话框中的内容的标记中嵌入一个 JavaScript 文件，然后调用一个 init 方法来绑定事件。

我现在面临的问题是，由于某种原因，在 init 方法中，jQuery 没有找到脚本正在寻找的元素。几乎就像它们还没有被加载到 DOM 中一样。

如果在对话框加载后，我从控制台手动查找元素，它工作正常。

我的问题是，在进行 AJAX 调用时，jQuery 什么时候可以访问新添加的元素？

您如何看待我在对话框标记中嵌入 JavaScript 的方法？我总是可以有一个回调，加载我的对话框的模块可以用来初始化事件，但我试图在对话框中封装尽可能多的逻辑，以便可以从多个地方加载对话框而不必重复我的启动代码。

是否有更好的方法来附加事件，在将内容添加到 DOM 后执行逻辑？

加载对话框：

loadMemberLoginHistoryDialog: function(memberId) {
    var dialogOptions = {
        onComplete: function(responseHtml) {}
    };
    var dialogUrl = '/members/' + memberId + '/loginHistoryDialog';
    $.favsDialog(dialogUrl, dialogOptions);
}

在对话框中加载的内容的标记中编写脚本：

        <script src="/js/zMemberLoginHistoryDialog.js" type="text/javascript"></script>
        <script>
            favsManageMemberLoginHistoryDialog.init('@Constants.LanguageCode');
        </script>

favsManageMemberLoginHistoryDialog 模块：

var favsManageMemberLoginHistoryDialog = function() {
   function initializeControls() {
        $(".frmManageMembersMemberDelete")
            .submit(function() {
            if (confirm("Are you sure?")) {
                return true;
            }
            return false;
        });
    }

    return {
        init: function(language) {
            languageCode = language;
            initializeControls();
        }
    }; //return
}
4

0 回答 0