Jquery html 函数第二次不起作用

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 6 年前。

我试图强制对具有内联样式的输入按钮进行一些更改。我使用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 事件。

如果你只想改变样式，最简单的方法是这样的:

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

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

});