Jquery HTML-Funktion funktioniert nicht das zweite Mal

Question

Ich versuche, einige Änderungen an einem Eingabeknopf mit Inline-Stil zu erzwingen. Ich benutze die HTML-Funktion von jQuery. Es funktioniert das erste Mal, wenn ich auf die Schaltfläche + klicken, aber nicht funktioniert, wenn ich klicken Sie auf die - Taste

<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/

dankt allen

Answer 1

Ihr Problem ist: Bei einem Klick erstellen Sie der Knopf ist komplett neu. Dieser neue Button hat kein onclick-event mehr.

Wenn Sie nur die Art ändern möchten, ist die einfachste Art und Weise, wie diese es zu tun wäre:

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

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

}); 

Answer 2

Sie benötigen event delegation zu verwenden, so haben Sie binden die Schaltfläche ein bisschen anders für dinamically Elemente hinzugefügt und auch müssen Sie die richtigen IDs für die minus Zeichen Schaltfläche hinzufügen:

$(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>

Sie sind so kompliziert. Versuchen Sie, nur das Hinzufügen und Entfernen eines .active Klasse, wenn Sie nicht von einigen anderen Dingen gezwungen sind:

$('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>