的onclick不刪除後工作/ jQuery的

Question

添加類我想知道爲什麼只有第一的onclick此代碼的工作：

HTML：

<div id="TheCarouselPlay"> 
     <button type="button" class="btn btn-warning btn-xs pause"> 
      <i class="fa fa-pause"></i> 
     </button> 
    </div> 

JS：

/* pause & play */ 
$('#TheCarouselPlay button.pause').click(function() { 
    $('#TheCarouselPlay i').removeClass('fa-pause').addClass('fa-play'); 
    $(this).removeClass('pause').addClass('play'); 
}); 
$('#TheCarouselPlay button.play').click(function() { 
    $('#TheCarouselPlay i').removeClass('fa-play').addClass('fa-pause'); 
    $(this).removeClass('play').addClass('pause'); 
}); 

http://jsfiddle.net/W59Me/4/

Answer 1

嘗試使用事件處理程序代替：

/* pause & play */ 
$('#TheCarouselPlay').on('click', 'button.pause', function() { 
    $('#TheCarouselPlay i').removeClass('fa-pause').addClass('fa-play'); 
    $(this).removeClass('pause').addClass('play'); 
}); 
$('#TheCarouselPlay').on('click', 'button.play', function() { 
    $('#TheCarouselPlay i').removeClass('fa-play').addClass('fa-pause'); 
    $(this).removeClass('play').addClass('pause'); 
}); 

這是新的小提琴： http://jsfiddle.net/xe79K/

Answer 2

這可以通過點擊一個按鈕的處理程序來完成，在此基礎上階級按鈕目前有檢查當前狀態：

$('#TheCarouselPlay button').click(function() { 
    if($(this).hasClass('play')){ 
     $('#TheCarouselPlay i').removeClass('fa-play').addClass('fa-pause'); 
     $(this).removeClass('play').addClass('pause'); 
    } else{ 
     $('#TheCarouselPlay i').removeClass('fa-pause').addClass('fa-play'); 
     $(this).removeClass('pause').addClass('play'); 
    } 
}); 

這裏小提琴：http://jsfiddle.net/gW2pn/

Answer 3

你必須使用on（）

/* pause & play */ 
$('#TheCarouselPlay').on('click','button.pause',function() { 
    $('#TheCarouselPlay i').removeClass('fa-pause').addClass('fa-play'); 
    $(this).removeClass('pause').addClass('play'); 
}); 
$('#TheCarouselPlay').on('click','button.play',function() { 
    $('#TheCarouselPlay i').removeClass('fa-play').addClass('fa-pause'); 
    $(this).removeClass('play').addClass('pause'); 
}); 

因爲在定義單擊事件時button.play不存在。

Answer 4

setTimeout函數將會訣竅。 下面是一個例子：

setTimeout(function(){ 
     $(this).removeClass('play').addClass('pause'); 
    }, 100);