jQuery preventDefault() not working on first click

Question

I have the following code

$("#logoutLink").click(function(event) {

    event.preventDefault();

    var dataString = "action=confirm";

    $.ajax({
        type: "POST",
        url: "requests.php",
        data: dataString,
        success: function(msg) {
            if (msg == "success") {
               alert('logged out');
            } else {
                showNotification("error", "" + msg + "");
            }
        },
        error: function() {
            showNotification("error", "Could not log you out at this time, try again.");
        }
    });

    return false;
});

and a link with id="logoutLink"

the preventDefault doesn't work first time because the login system doesn't refresh the link and adds html content with links, in which is the logout link and therefore the item doesn't exist in html, I know this is the problem, but my question is how would I make it know that html content has been added with link id logoutLink without page refresh?

Answer 1

You question is not clear, but it you're adding the link dynamically, you should be using either .live('click', ...), or the new jQuery 1.7 .on().

Answer 2

Your question is a bit confusing, but try using live() to bind your event handler:

$("#logoutLink").live('click', function(event) {
    // ...

See http://api.jquery.com/live/ for more information.

Answer 3

you need to add the click handler $("#logoutLink").click(function(event) {} only after the login system adds the links, so I'd do the following

function addHandlers(){
    $("#logoutLink").click(function(event) {
         event.preventDefault();
         // anything else
    }
}

$(document).ready(function(){
    addHandlers();
});

then also call addHandlers(); when the links are added