How to synchronize jquery load files with jquery bind events

Question

I need to add to DOM some html´s by jquery, and bind some events the generated elements, but i cant syncronize it, where the addEvents function starts, the DOM elements are not created, so the $(".login-log") element is not on DOM yet.

I found this:

Javascript Event Synchronization

Im working on it but dont works for me, that my code, i dont know if i miss something or what:

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

The syncronizathion makes the alert "is here" to appear before the DOM elements of header and login.html are loaded in DOM.

I know that have to be simple, but i dont find the solution.

Thanks in advice.

What doesn't work? You need to improve this question to ask a specific question, see the stackoverflow.com/faq — Liam
– Liam, Commented Feb 15, 2013 at 9:17
I need to add to DOM some html´s by jquery, and bind some events to that elements i generate, but i cant syncronize it, where the addEvents function starts, the DOM elements are not created, so the $(".login-log") element is not on DOM yet. — ruudy
– ruudy, Commented Feb 15, 2013 at 9:29
I think is clear here: "The syncronizathion makes the alert "is here" to appear before the DOM elements of header and login.html are loaded in DOM." Dont put a negative vote and try to understand the question before... — ruudy
– ruudy, Commented Feb 15, 2013 at 9:31
Your loadFiles function invokes the callback before the two load has happened. Btw, those stepOne and stepTwo are completely unnecessary, just call loadFiles(addEvents) — Bergi
– Bergi, Commented Feb 18, 2013 at 8:25

ruudy · Accepted Answer · 2013-02-18 08:02:17Z

1

My final choose:

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() {

}

answered Feb 18, 2013 at 8:02

ruudy

4912 gold badges8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to synchronize jquery load files with jquery bind events

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related