jQuery toggleClass không hoạt động?

Question

Rất đơn giản: dòng currentItem.toggleClass('open'); dường như không hoạt động.

Chính xác hơn, khi kiểm tra kết quả bằng firebug, tôi có thể thấy lớp "mở" nhấp nháy (xuất hiện và ngay lập tức biến mất) trên phần tử liên quan. Vì vậy, nó giống như chức năng thực sự được kích hoạt hai lần (tất nhiên tôi chỉ bấm một lần).

Ai đó có thể giải thích cho tôi lý do tại sao điều này và cách ngăn chặn nó?

Đây là mã jQuery của tôi:

$('div.collapse ul.radio_list li input[type=radio]').click(function (event) { 

    var currentTree = $(this).parent().parent().parent(); 
    var currentItem = $(this).parent().parent(); 
    var currentGroup = currentItem.attr('rel'); 

    $(this).parents('ul').children('li').removeClass('select'); 
    if ($(this).is(':checked')) { 
     currentItem.addClass('select'); 
    } 

    currentItem.toggleClass('open'); 

    var currentLevel = 0; 
    if (currentItem.is('.level1')) {currentLevel = 1;} 
    if (currentItem.is('.level2')) {currentLevel = 2;} 
    if (currentItem.is('.level3')) {currentLevel = 3;} 
    var nextLevel = currentLevel + 1; 

    currentTree.children('li').filter('li[rel ^=' + currentGroup + '].level' + nextLevel).animate({'height': 'show', 'opacity': 'show'}, 250).addClass('currentChild'); 
}); 

Và đây là một phần của mã HTML của tôi, hơi đơn giản hóa cho dễ đọc hơn (không phải là rất đẹp Tôi biết, nhưng tôi chỉ có một điều khiển hạn chế trên đầu ra HTML):

<div class="col_left collapse"> 
    <ul class="radio_list" rel="7"> 
     <li class="onglet level0" rel="group1"> 
      <span class="onglet level0"> 
       <input type="radio" /> 
        <label>Services Pratiques</label></span> 
      <input type="hidden" value="1"> 
     </li> 

Xin cảm ơn trước.

Answer 1

Sự cố được giải quyết: tệp JS thực sự được bao gồm hai lần trong đầu HTML, khiến cho chức năng được kích hoạt hai lần với mỗi lần nhấp.

Answer 2

Tôi đã gặp sự cố tương tự trên trang web của mình và tôi thấy rằng tôi đã vô tình nhân đôi móc toggleclass ở phía dưới cùng, khi lần đầu tiên làm rối tung nó. Rất tiếc! Hãy chắc chắn tìm kiếm các cuộc gọi kép!

Answer 3

Tôi đã có một vấn đề tương tự làm điều này:

html:

<a>JS-link</a> 

js:

$('a').click(function(event) { 
    ... my stuff ... 
    # Forgot to do event.preventDefault(); !! 
} 

kết quả trong nhấp chuột là đăng ký hai lần!

Answer 4

Tôi đã gặp vấn đề tương tự và nhận ra rằng tôi đã vô tình giới hạn chức năng hai lần. Tôi đã có nghĩa là ban đầu có nghĩa là để di chuyển mã từ một tập tin javascript khác nhưng vô tình để lại bản gốc ở vị trí của nó.