2010-03-31 136 views
1

我遇到了jquery实时事件绑定的问题。当链接添加到页面时,它工作正常,但是当另一个链接添加到无序列表中时,它需要两次点击才能在任一链接上触发点击事件。有任何想法吗?HTML链接和Jquery Live仅在第一次尝试时尝试点击一下

$("div#website-messages ul li a").live("click", function() { 
    var link = $(this); 
    changeTab(link.attr("href")); 
    $(link.attr("title")).focus(); 
    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); 
} 

ChangeTab功能

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

解决 我对到验证他们正在集中在文本输入的模糊事件。如果我点击其中的一个错误并将注意力集中到第一个文本框,然后单击第二个错误,它会将焦点放在第二个文本框上,但是会触发模糊事件而不是焦点。非常感谢你的帮助和建议,这让我一整天都很疯狂。

+1

代码是否运行两次,每次链接一次?尝试在函数中添加警报... – 2010-03-31 14:11:27

+0

是的,代码将为每个链接运行一次。之后,它需要双击才能运行。 – Jon 2010-03-31 14:16:58

+0

@Jon我认为James的建议是,通过单击一个链接一次,您在那里的代码实际上可能会执行两次。结果进入一个奇怪的状态,行为正在得到意想不到的结果,因为每次点击都会多次执行代码。你能在jsbin.com上提供你的问题的例子吗? – Matt 2010-03-31 14:42:07

回答

0

我对到验证他们正在集中在文本输入的模糊事件。如果我点击其中的一个错误并将注意力集中到第一个文本框,然后单击第二个错误,它会将焦点放在第二个文本框上,但是会触发模糊事件而不是焦点。

1

编辑:好的我已经缩小了 问题。如果我取消返回false,则每次都会触发事件。 问题是,然后页面跳转到 顶部。任何想法来阻止呢?


尝试

event.preventDefault(); 
+0

这带来了我之前遇到的同样的问题。还有其他建议吗? – Jon 2010-03-31 15:55:57

1

由于跳转到顶部...什么是实际HREF的内容?如果它像“#”那样,那么它可能会跳到顶端。如果点击的结果是改变页面上的内容,而不是实际导航离开该页面,则可以考虑使用:

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

这会阻止页面跳转到顶部,但也会停止每次发生的事件。 – Jon 2010-03-31 16:11:21

+0

我想我对你试图完成什么感到困惑 - 链接是否导航到新页面?如果您只是使用链接触发页面上的事件,则必须返回false或使用javascript:void(0)或#作为href。如果你不返回false,它将导航到href的url。 – Matt 2010-03-31 17:42:27

1

这阻止链接跳转到顶部:

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

这使得它每次都是火!

$("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:

你的链接应该是这样的:

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

同样的问题:-(。其他建议? – Jon 2010-03-31 16:36:15

+0

我有一个带有标签界面的表单,在右边列出了表单的所有错误,每个错误都是可点击的,当用户点击错误时,改变到正确的选项卡,并应该重点关注与错误相关的文本输入你知道另一种方法来完成我想要做的吗? – Jon 2010-03-31 16:51:20

+0

也许问题在别处,防止链接跳到顶部的正确形式是使用return false;或preventDefault;你可以添加一些其他代码!? – 2010-03-31 16:54:06