2014-09-03 95 views
0

我有這種處理器的事件處理程序處理選擇兩次

$(".mydiv").on('click', function(e){ 

// some logic 
$(this).toggleClass('active'); 

//other logic 

}); 

我已經在那裏被觸發這兩次事件中的錯誤,我看到,在第一次運行this".mydiv"並在第二次運行this".mydiv.active"而且看起來".mydiv.active"在事件處理期間添加到與選擇器匹配的節點列表中

有沒有辦法解決這個問題?

這是更全面的代碼:

$(".filter_view:not(.mobile-view) .filter_content .cat, .filter_view:not(.mobile-view) .filter_content .check_area, .mobile-view .search_filter").on("click", function(e){ 
     debugger; 

     $(this).toggleClass("active"); 
       e.stopPropagation(); 

// rest of the logic 

}); 

<span class="check_area col-xs-4 col-md-2"> 
    <input class="filter_checkbox" id="Neve" name="Neve" type="checkbox" value="Neve"> 
    <label class="filter_checkbox_label" for="Neve">Neve</label> 
</span> 

基本上,父爲.filter_view,但在移動它有一個.mobile-view類,所以在移動我希望search_filter在點擊的時候做邏輯上不移動在check_area(這是複選框+標籤)和.cat(類別)

當檢查第一個和第二個觸發器上的事件時,第一個目標是標籤(我點擊了)但第二個目標是複選框(我沒有點擊)

即使我停止傳播,這可能是因爲自舉(或一些其他的框架LIB)具​​有當標籤被點擊複選框是click()版以及的事件?

+0

你有沒有試過e.preventDefault(); ? – 2014-09-03 08:27:29

+2

檢查事件註冊碼是否被調用兩次 – 2014-09-03 08:27:33

+0

@ArunPJohny是最有可能發現的。事件處理程序將被執行兩次的唯一方法是它被調用兩次,通常是因爲分配它的代碼運行兩次。 – Archer 2014-09-03 08:32:00

回答

0

嘗試

$(".mydiv").on('click', function(e){ 

// some logic 
$(this).toggleClass('active'); 

e.stopPropagation(); 

}); 

stopPropagation()阻止事件的冒泡。

+0

我已停止傳播,在toggleClasses不起作用之前和之後 – 2014-09-03 08:35:40

0

添加$(".mydiv").off('click');綁定click事件,你給我們的代碼可能正在調用兩次,結合事件處理程序前兩次。也許你在一個不止一次被調用的init()函數中有它?

+0

沒有init,它在$(document).ready() – 2014-09-03 08:39:55

+0

事件被觸發兩次的機會很渺茫:http://stackoverflow.com/a/10727036/2295592 – 2014-09-03 09:16:46