2010-03-31 65 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