Jquery html function not working the second time

Question

i am trying to force some change on an input button with inline style. I use the html function of jQuery. It works the first time when i click on the + button, but not working when i click on the - button

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

thanks all

Every button in your click handlers has the ID of `id='bouton_plus'`. Fix that and it works fine. But I'm closing this since your real issue is event delegation. https://jsfiddle.net/j08691/z148xexp/5/ — j08691, Mar 01 '17 at 14:56

score 0 · Answer 1 · answered Mar 01 '17 at 14:53

Your problem is: On click, you create the button completely new. That new button does not have any onclick-event attached anymore.

If you only want to change the style, the easiest way to do it would be like this:

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

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

});

Ionut Necula · Answer 2 · 2017-03-01T15:02:22.950

You need to use event delegation so you have to bind the click a bit different for dinamically added elements and also you need to add correct ids for the minus sign button:

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

You are overcomplicating like that. Try just adding and removing an .active class if you're not forced by some other things:

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

Jquery html function not working the second time

2 Answers2