javascript - 如何将 jquery 加载文件与 jquery 绑定(bind)事件同步

Question

我需要通过jquery向DOM添加一些html，并将一些事件绑定(bind)到生成的元素，但是我无法同步它，在addEvents函数开始的地方，没有创建DOM元素，所以$(".login -log") 元素尚未出现在 DOM 上。

我发现了这个:

Javascript Event Synchronization

我正在研究它，但对我来说不起作用，我的代码，我不知道我是否错过了某些东西或什么:

var Login = function ()
{
var commons = new Commons();

this.init = function()
{
    stepOne(stepTwo);

    commons.init();
}

function stepOne(callback) {
    var AsyncDone = function()
    {
        callback();
    }
    loadFiles(AsyncDone);
}

function loadFiles(callback)
{
    $(".header-container").load("views/header.html");
    $(".content-container").load("views/login.html");
    callback();
}

function stepTwo() {
    addEvents();
}

function addEvents() {
    alert("is here");
    $(".login-log").bind("click", function() { alert("fuck"); });
}
}

同步使警报“在这里”在 header 和 login.html 的 DOM 元素加载到 DOM 之前出现。

我知道这必须很简单，但我找不到解决方案。

感谢您的建议。

Answer 1

我的最终选择:

this.init = function()
{
    loadHeader(addHeaderEvents);
    loadTemplate(addTemplateEvents);
    loadFooter(addFooterEvents);

    commons.init();

}

function loadHeader(callback) {
    $(".header-container").load("views/header.html", function() {
        callback();
    });
}
function addHeaderEvents() {

}

function loadTemplate(callback) {
    $(".content-container").load("views/template_login.html", function() {
        callback();
    });
}
function addTemplateEvents() {
    alert("llega");
    $(".login-log").bind("click", function() { alert("done"); });
}

function loadFooter(callback) {
    $(".footer-container").load("views/footer.html", function() {
        callback();
    });
}
function addFooterEvents() {

}