在jQuery和changeclass上使用（'click'）事件只觸發一次

在下面的腳本中，第一次點擊「toggleExtras」跨度。但隨後的點擊無效。我試圖使用on（'click'）方法和toggleClass來爲切換和非切換狀態定義事件。在jQuery和changeclass上使用（'click'）事件只觸發一次

jQuery(document).ready(function() 
    { 
     jQuery('.toggleExtras').on('click', function(e) 
     { 
      //jQuery('.extras').slideToggle(); //This works but bounces twice. 
      jQuery('.extras').show(); 
      jQuery('.toggleExtras').text('Hide Advanced Options'); 
      jQuery('.toggleExtras').toggleClass('toggleExtras toggleExtrasHide'); 
     }); 

     jQuery('.toggleExtrasHide').on('click', function(e) 
     { 
      jQuery('.extras').hide(); 
      jQuery('.toggleExtrasHide').text('Show Advanced Options'); 
      jQuery('.toggleExtrasHide').toggleClass('toggleExtrasHide toggleExtras'); 
     }); 
    });

HTML：

<span class="toggleExtras">Show Advanced Options</span>

來源

2013-02-26 RegEdit

你能張貼上的jsfiddle錯誤的例子嗎？ – 2013-02-26 03:48:16

我沒有收到控制檯錯誤。對已更改的類元素的點擊無效。該類被改變，但on（'click'）不會爲該元素觸發。 – RegEdit 2013-02-26 03:49:16

這是因爲.toggleExtrasHide不會在初始化時存在...

我重新寫你這樣的代碼：

jQuery('.toggleExtras').on('click', function(e){ 
    jQuery('.extras').toggle(); 
    jQuery(this).text(function(el, currentValue){ 
    return currentValue == "Show Advanced Options" ? "Hide Advanced Options" : "Show Advanced Options"; 
    }); 
});

演示：http://jsfiddle.net/xbLc2/

瞭解更多關於.toggle()：http://api.jquery.com/toggle/
瞭解更多關於.text()：http://api.jquery.com/text/

來源

2013-02-26 03:49:01 ahren

+1。完美的作品。謝謝您的幫助！ – RegEdit 2013-02-26 04:10:24

在jQuery和changeclass上使用（'click'）事件只觸發一次

回答

相關問題