jquery html函數第二次不能正常工作

我試圖用內聯樣式強制對輸入按鈕進行一些更改。我使用jQuery的html函數。它的工作原理第一次，當我+按鈕點擊，但是當我在點擊不工作 - 按鈕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/

感謝所有

來源

2017-03-01 Frederic CS

您應該看到[.toggle（）]（http://api.jquery.com/toggle /） –

您的點擊處理程序中的每個按鈕都具有id ='bouton_plus''的ID。解決這個問題，它工作正常。但是我正在關閉這個，因爲你真正的問題是事件代表團。 https://jsfiddle.net/j08691/z148xexp/5/ – j08691

您的問題是：在用戶點擊，您可以創建該按鈕全新。該新按鈕沒有任何附加的onclick事件。

如果你只是想改變風格，最簡單的方式做這將是這樣的：

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

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

});

來源

2017-03-01 14:53:15 Psi

您需要使用event delegation所以，你必須綁定點擊dinamically有點不同添加的元素，你也需要添加正確的ID爲minus號按鈕：

$(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類，如果你不通過一些其他的東西強行：

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

來源

2017-03-01 14:55:00 Ionut

jquery html函數第二次不能正常工作

回答

相關問題