HTML 链接和 Jquery Live 仅在第一次尝试时一键运行答案

【问题标题】：HTML Link and Jquery Live Only Works on First Try with one clickHTML 链接和 Jquery Live 仅在第一次尝试时一键运行
【发布时间】：2010-03-31 14:01:56
【问题描述】：

我在链接上遇到 jquery 实时事件绑定问题。当链接添加到页面时它工作正常，但是当另一个链接添加到无序列表时，它需要两次单击才能在任一链接上触发 click 事件。有什么想法吗？

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

编辑：好的，我已经缩小了问题的范围。如果我取出 return false，则事件每次都会触发。问题是页面跳转到顶部。有什么想法可以阻止这种情况吗？

创建链接的代码：

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

更改选项卡函数

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

已解决 我在文本输入上发生了一个模糊事件，这些事件正在验证它们。如果我单击一个错误并聚焦到第一个文本框，然后单击第二个错误，它将聚焦到第二个文本框但会触发模糊事件而不是聚焦。非常感谢大家的帮助和建议，这让我一整天都发疯了。

【问题讨论】：

代码是否运行两次，每个链接一次？尝试在函数中添加警报...
是的，代码将为每个链接运行一次。然后需要双击才能运行。
@Jon 我认为 James 的建议是，只需单击一个链接一次，您那里的代码实际上可能会执行两次。结果会进入一个奇怪的状态，因为每次点击都会多次执行代码，所以行为会得到意想不到的结果。您能否在 jsbin.com 上提供您的问题示例？
我正在尝试在 jsbin 上创建一个示例，但它不会重现问题。
我建议尝试缩小您的代码与 jsbin 中的工作之间的差异 - 显然有些不同

标签： javascript live jquery

【解决方案1】：

编辑：好的，我已经缩小了范围问题。如果我取出 return false，该事件每次都会触发。这问题是页面跳转到最佳。有什么想法可以阻止这种情况吗？

试试

event.preventDefault();

【讨论】：

这又带回了我之前遇到的同样问题。还有其他建议吗？

【解决方案2】：

既然它跳到顶部......实际的href内容是什么？如果它是“#”之类的东西，那么它可能会跳到顶部。如果单击的结果是更改页面上的内容，而不是实际导航离开页面，您可以考虑使用：

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

【讨论】：

这会阻止页面跳转到顶部，但也会阻止事件每次触发。
我想我对您要完成的工作感到困惑 - 链接是否导航到新页面？如果您只是使用链接来触发页面上的事件，那么您必须返回 false 或使用 javascript:void(0) 或 # 作为 href。如果不返回 false，它将导航到 href 的 url。

【解决方案3】：

这样可以防止链接跳转到顶部：

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

这使得 js 每次都会触发！

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

更新：

你的链接应该是这样的：

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

【讨论】：

同样的问题 :-( 。还有其他建议吗？
我有一个带有选项卡式界面的表单。在右侧，我列出了表单的所有错误，每个错误都是可点击的。当用户单击错误时，它会切换到正确的选项卡，并且应该关注与错误相关的文本输入。你知道另一种方法来完成我想做的事情吗？
可能问题出在其他地方，防止链接跳转到顶部的正确形式是或者使用return false；或防止默认；你能添加一些其他代码吗！？
不要介意我对焦点（）的最后评论；我的错;改为检查 changeTab(link.attr("href"));可能是导致错误的标签！试试看！
还是不行，我在上面的代码中添加了changeTab函数。感谢您的所有帮助！

【解决方案4】：

我在文本输入上发生了一个模糊事件，这些事件正在验证它们。如果我单击其中一个错误并聚焦到第一个文本框，然后单击第二个错误，它将聚焦到第二个文本框但会触发模糊事件而不是聚焦。

【讨论】：