ajax generated html being ignored in jquery

Question

When the user logs in, upon success it outputs the button html below

<button class="logout-button">Logout</button>

I also have that button html hardcoded into the html since it needs to be on the website throughout the site, the ajax only outputs it on success and once you refresh the page, that ajax html disappears, I hope that makes sense.

After successfully logging in, it displays the ajax generated button html (as seen above). I click it and it does nothing, but if I refresh the page, it looks exactly the same, because it now is displaying the hard coded button html (I mentioned previously). When I click that, it logs them out as expected. I set the button to have a class instead of id, because with the button being hard coded into the html and the ajax displaying it, it may display twice, but it doesn't, but I just did that to narrow it down to not having two elements with the same id.

Below waits for the logout button to be clicked, it only works when I click the hard coded button html, but not the html button that the ajax generates upon a successful login.

$(".logout-button").click(function(event) 
{
    // stop the contact form from submitting normally
    event.preventDefault(); 

    $.ajax(
    {
        url: "/?ACT=79&return=%2F",
        type: "post",
        dataType: "html",           
        data: $(this).serialize(),

        // there was an error
        error: function(jqXHR, textStatus, errorThrown)
        {
            displayAjaxMessage("Sorry, there was an error logging out, please try again.");
        },

        success: function(html, textStatus, jqXHR) 
        {
            $("#login-form").show();
            $(".logout-button").hide();
            displayAjaxMessage("<p>You are now logged out</p>");
        }

    });
});

Below, upon successful login, generates the button html:

displayAjaxMessage('<button class="logout-button">Logout</button>');

Here is the displayAjaxMessage, this amy h

function displayAjaxMessage(message)
{
    $("#login-form-message").html(message);
    $("#login-form-message").show();
}

The hard coded html is:

<button class="logout-button">Logout</button>

Also, I tried changing the button click to $(".logout-button").on('click', function(event) and still no luck.

Change $(".logout-button").click(function(event) to $(document).on('click','.logout-button',function(event) — deb0rian, Nov 19 '13 at 16:02

score 4 · Accepted Answer · answered Nov 19 '13 at 16:02

4

Event delegation!

$("#login-form-message").on("click", ".logout-button", function() {

answered Nov 19 '13 at 16:02

tymeJV

103,943
14
161
157

score 3 · Answer 2 · answered Nov 19 '13 at 16:02

3

Change attaching the click event at the document level to listen it

$(".logout-button").click(function(event) {});

to

$(document).on("click",".logout-button",function(event) {});

answered Nov 19 '13 at 16:02

Murali Murugesan

22,423
17
73
120

This answer should work. The problem is that your onclick handler is called before the button HTML is generated, so the onclick can't find anything to attach to. Event delegation fixes that by applying your onclick handler to any new elements as they are created. More here: http://api.jquery.com/on/#direct-and-delegated-events – Zac Nov 19 '13 at 16:16

score 3 · Answer 3 · answered Nov 19 '13 at 16:05

3

Try this code and replace to your code

$(document).on("click",".logout-button",function(event) {});

answered Nov 19 '13 at 16:05

Vahid Taghizadeh

997
8
9

ajax generated html being ignored in jquery

3 Answers3