javascirptを使用したChaningボタンクラス

Question

下のボタンをクリックすると、javascriptコードはクラスがbtn-defaultかどうかをチェックし、javascriptはクラスを "btn btn-default"からbtn btn-successに変更します。しかし、ボタンをもう一度クリックすると、ボタンクラスがbtn-defaultから変更されたとしても、再びjavascriptコードが呼び出されます。ページの

コード：

<div class=vote> 
     <button type="button" id="test" type="submit" class="btn btn-default"> 
     <span class="glyphicon glyphicon-thumbs-up"></span></button> 

のjavascript：イベントがまだでも、クラスの変更後に接続されているので、これが起こっている

$(".vote").find(".btn-default").click(function() { 
    button_id = this.id; 
     $.ajax({ 
      type: 'post', 
      url: '/vote', 
      data: { 
       '_token': $('input[name=_token]').val(), 
       'word_id': button_id 
      }, 
      success: function(data) { 
       if ((data.errors)){ 
        $('.error').removeClass('hidden'); 
        $('.error').text(data.errors.name); 
       } 
       else { 
$('#'+button_id).removeClass('btn btn-default').addClass('btn btn-success'); 

       } 

Answer 1

。あなたは、イベントの委任を使用することによって、これを防ぐことができます

：

$(".vote").on('click', ".btn-default", function() { 
 
    console.log('clicked'); 
 
    $(this).removeClass('btn-default').addClass('btn-success'); 
 
});

.btn-default { 
 
    background-color: blue; 
 
} 
 

 
.btn-success { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class=vote> 
 
    <button type="button" id="test" type="submit" class="btn btn-default"> 
 
     <span class="glyphicon glyphicon-thumbs-up">Thumbs Up</span> 
 
    </button> 
 
    <button type="button" id="test" type="submit" class="btn btn-default"> 
 
     <span class="glyphicon glyphicon-thumbs-down">Thumbs Down</span> 
 
    </button> 
 
</div>