Jqueryのhtml関数が2回目に動作しません

Question

インラインスタイルの入力ボタンを強制的に変更しようとしています。私はjQueryのhtml関数を使用します。それは私が+]ボタンをクリックしてください最初の時間を動作しますが、私は上のクリックしたときに動作していない - ボタン

<div id='div_bouton_moins'><input type=button value='-' id='bouton_moins' style='background-color:green !important'></div> 
<div id='div_bouton_plus'><input type=button value='+' id='bouton_plus' style='background-color:red !important'></div> 


$('#bouton_moins').click(function(){ 

$('#div_bouton_plus').html("<input type=button value='+' id='bouton_plus' style='background-color:red !important'>") 
$('#div_bouton_moins').html("<input type=button value='-' id='bouton_plus' style='background-color:green !important'>"); 
}); 


$('#bouton_plus').click(function(){ 

$('#div_bouton_plus').html("<input type=button value='+' id='bouton_plus' style='background-color:green !important'>"); 
$('#div_bouton_moins').html("<input type=button value='-' id='bouton_plus' style='background-color:red !important'>"); 


}); 

https://jsfiddle.net/z148xexp/

おかげで、すべての

Answer 1

あなたの問題がある：クリックで、あなたが作成します完全に新しいボタン。その新しいボタンには、もうonclick-eventが接続されていません。

あなただけのスタイルを変更したい場合は、それを行うための最も簡単な方法は次のようになります：

$('#bouton_plus').click(function(){ 

    $('#div_bouton_plus').css({"background-color":"green"}); 
    $('#div_bouton_moins').css({"background-color":"red"}); 

}); 

Answer 2

あなたはとてもあなたがdinamicallyのために少し異なるクリックをバインドする必要がevent delegationを使用する必要があります要素を追加しても、あなたはminus記号ボタンの正しいIDを追加する必要があります。

$(document).on('click', '#bouton_moins', function() { 
 
    $('#div_bouton_plus').html("<input type=button value='+' id='bouton_plus' style='background-color:red !important'>") 
 
    $('#div_bouton_moins').html("<input type=button value='-' id='bouton_moins' style='background-color:green !important'>"); 
 
}); 
 

 
$(document).on('click', '#bouton_plus', function() { 
 
    $('#div_bouton_plus').html("<input type=button value='+' id='bouton_plus' style='background-color:green !important'>"); 
 
    $('#div_bouton_moins').html("<input type=button value='-' id='bouton_moins' style='background-color:red !important'>"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='div_bouton_moins'><input type=button value='-' id='bouton_moins' style='background-color:green !important'></div> 
 
<div id='div_bouton_plus'><input type=button value='+' id='bouton_plus' style='background-color:red !important'></div>

あなたはそのように過密化しています。あなたは、いくつかの他のものによって強制されていない場合だけ.activeクラスを追加し、削除してください：

あなたは[.toggle（）]（http://api.jquery.com表示されるはずです

$('input[type="button"]').click(function() { 
 
    $('.active').removeClass('active'); 
 
    $(this).addClass('active'); 
 
});

input[type="button"] { 
 
    background: red; 
 
} 
 

 
input[type="button"].active { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='div_bouton_moins'><input type=button value='-' class='active' id='bouton_moins'></div> 
 
<div id='div_bouton_plus'><input type=button value='+' id='bouton_plus'></div>