HTML Link and Jquery Live Only Works on First Try with one click

Question

Hi Everyone,

I'm running into a problem with jquery live event binding on a link. When the link is added to the page it works fine, however when another link is added to the unordered list it requires two clicks for the click event to fire on either link. Any ideas?

$("div#website-messages ul li a").live("click", function() {
    var link = $(this);
    changeTab(link.attr("href"));
    $(link.attr("title")).focus();
    return false;
});

EDIT: OK I've narrowed down the problem. If I take out return false, the event fires every time. The problem is then the page jumps to the top. Any ideas to stop that?

Code that creates the links:

Validation.validate = function() {
    var html = "";
    for (var i = 0; i < errors.length; i++) {
        html += "<li><a href='" + errors[i].tabid + "' title='" + errors[i].elementID + "'>" + errors[i].message + "</a></li>";
    }
    $("div#website-messages ul").html(html);
}

ChangeTab Function

function changeTab(changeTo) {
    changeTo = changeTo.substr(changeTo.indexOf("#"), changeTo.length);
    $("#tabs div").hide();
    $(changeTo).show();

    $("ul.navigation li a").removeClass("selected");
    $("ul.navigation li a[href='" + changeTo + "']").addClass("selected");
}

SOLVED I had a blur event on the text inputs that were being focused to that validated them. If I clicked on one of the errors and focused to the first textbox, then clicked on the second error, it would focus to the second textbox but fire the blur event and not focus. Thank you all SO much for your help and suggestions, this was driving me crazy all day.

Answer 1

EDIT: OK I've narrowed down the problem. If I take out return false, the event fires every time. The problem is then the page jumps to the top. Any ideas to stop that?

try

event.preventDefault();

Answer 2

Since it jumps to the top ... what is the content of the actual href? If it is something like "#", then it will likely jump to the top. If the result of the click is to change the content on the page, instead of actually navigating away from the page, you might consider using:

<a href="javascript:void(0)">linky</a>

Answer 3

this prevent link jumps to the top:

<div id="website-messages">
<ul>
<li><a href="javascript:;" >my link</a></li>
</ul>
</div>

this make js it fire every time!

$("div#website-messages ul li a").live("click", function(e) {
    //this make it fire every time!
    e.preventDefault();
    var link = $(this);
    changeTab(link.attr("href"));
    $(link.attr("title")).focus();
});

UPDATE:

your link should be something like this:

<li><a id='" + errors[i].elementID + "' href='javascript:;' title='" + errors[i].tabid + "'>" + errors[i].message + "</a></li>

Answer 4

I had a blur event on the text inputs that were being focused to that validated them. If I clicked on one of the errors and focused to the first textbox, then clicked on the second error, it would focus to the second textbox but fire the blur event and not focus.