2014-09-10 32 views
1

卡住我有一個鏈接一個簡單的div在:jQuery函數中環

<div class="mhButton"> 
    <a href="#" id="RegisterAnimal"><span class="icon-checkmark"></span>&nbsp;&nbsp;Register Animal</a> 
</div> 

我已經有每當點擊「div.mhButton」所觸發的功能。這個函數應該找到'div.mhButton'子'a'並點擊它。

$(".mhButton").on('click', function() { 
     var a = $(this).find("a").text(); 
     console.log(a); 
     $(this).find("a").click(); 
    }); 

但是,這工作,我被卡在循環,運行639次。

我無法理解爲什麼這運行X次的時間,然後繼續沒有錯誤。

有沒有人有如何防止這個問題的解決方案?以及爲什麼發生這種情況的解釋?

注*控制檯一次又一次地記錄相同的按鈕。

+2

你爲什麼要做'.off()。click()'? – tymeJV 2014-09-10 18:33:57

+0

正試圖刪除點擊事件處理程序,用正確的代碼更新了queestion。感謝您指出了這一點。 – Mark 2014-09-10 18:36:56

+0

可能是因爲您在點擊容器時觸發了錨點的點擊,然後點擊了錨點時,容器點擊被觸發等等,因此它變成了圓形。你爲什麼不把容器綁定到錨處理程序,並停止傳播 – Huangism 2014-09-10 18:38:56

回答

2

由於a標籤嵌入在按鈕中,因此您不斷重新觸發事件。事件會冒泡,所以錨點會被點擊,然後是其父。它正在運行,直到瀏覽器厭倦了運行它,然後它停止。該方法實際上沒有做任何事情,這可能是爲什麼你沒有看到任何問題。你可以實現你的目標幾種方法:

$(".mhButton").click(function() { 
    $(this).off('click'); // turn the click handler off in the handler itself. 
    var a = $(this).find("a").text(); 
    console.log(a); 
    $(this).find("a").click(); 
}); 

如果你這樣做,那麼你最終將只能夠一次觸發事件。

或者:

$(".mhButton").click(function (e) { 
    a = $(this).find("a").text(); 
    console.log(a); 
    $(this).find("a").click(); 
}); 

$("#RegisterAnimal").click(function (e) { 
    e.stopPropagation(); // prevent the anchor from re-firing the button click 
}); 

Altenatively,你可以樣式的鏈接看起來像一個按鈕,並避免不必要的點擊處理一起。

+0

謝謝,這是我需要的。 – Mark 2014-09-10 18:41:06

+1

@JuanMendes ...這正是代碼後面說的內容:p – Bic 2014-09-10 18:45:38

+0

@Mark您的方法的唯一問題就是因爲在文檔上可能會出現一個永遠不會觸發的點擊事件。菜單和彈出窗口通常是這種情況,當您單擊頁面上的其他位置時應該將其解除。使用'stopPropagation'方法不會隱藏菜單。 – 2014-09-10 19:03:27

1

當您致電$(this).find("a").click();時,事件將冒泡至div.mhButton標記並導致您的處理程序再次被調用。它運行約500倍的原因是因爲它有一個堆棧溢出停止時,它不會繼續

可以防止它通過檢查,如果點擊是<a>標籤本身,而不是在這種情況下調用click()

工作例如:http://jsfiddle.net/mendesjuan/zdkrhh42/

注:關於接受的答案

比克的第二個答案几乎工作,我的是副作用少了不同的方法。調用stopPropagation時遇到的主要問題是,在整個文檔中可能會有處理程序在這種情況下不會被解僱。一個常見的情況是當你有一個菜單或對話框,當你點擊頁面上的任何其他地方時,該對話框應該隱藏。 stopPropagation方法將防止菜單在點擊按鈕時被隱藏。

$(".mhButton").click(function (e) {  
    // Only run this handler if the click was on the div, not the link itself 
    if ($(e.target).is('a, a *')) { 
     return; 
    } 
    var a = $(this).find("a").text(); 
    $(this).find("a").click(); 
}); 
+0

這是如何防止它呢?我需要點擊它。 – Mark 2014-09-10 18:35:30

+0

@Mark你爲什麼需要點擊它?你不能只將'window.location.href'設置爲所需的URL嗎? – Alnitak 2014-09-10 18:37:01

+0

因爲它實際上觸發了ajax調用。 – Mark 2014-09-10 18:37:55