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

Question

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

我找到了这个：

Javascript 事件同步

我正在研究它，但对我不起作用，我的代码，我不知道我是否错过了什么或什么：

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"); });
}
}

syncronizathion 使警报“在这里”出现在 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() {

}