頁面重新加載後，JQuery .on（）綁定不起作用

Question

在我的頁面上，我有一個報表過濾器。表單通過ajax提交，然後我重新加載頁面的一部分。在頁面部分關閉後，jQuery綁定不再在頁面的重疊部分中工作。

這裏是我的html：

<input type="button" id="mainButton" value="Reload the container"/> 
<div id="reloadable" style="border: 1px solid black;"> 
    <input type="button" class="supplimentalButton" value="You should see alert" /> 
</div> 

這是jQuery的1.9.1綁定：

// this bit works just fine first time. 
// but after reload the binding is no longer attached 
// and alert is not coming up on button click 
$('.supplimentalButton').on('click',function(){ 
    alert($(this).val()); 
}); 

// this is what reloads the container 
$('#mainButton').on('click', function(){ 
    $('#reloadable').html('<input type="button" class="supplimentalButton" value="Alert does not work anymore" />'); 
}); 

這裏是的jsfiddle：http://jsfiddle.net/trailmax/4JEQv/4/

到目前爲止，所有的我已經諮詢看到當時是用.on()進行綁定。這就是我正在做的。有關這個問題的任何建議？

Answer 1

$('#reloadable').on('click','.supplimentalButton',function(){ 
    alert($(this).val()); 
}); 

$('#mainButton').on('click', function(){ 
    $('#reloadable').html('<input type="button" class="supplimentalButton" value="Alert does not work anymore" />') 
}); 

在這裏你去：http://jsfiddle.net/4JEQv/5/

Answer 2

使用事件代表團一樣

$('#reloadable').on('click','.supplimentalButton',function(){ 
    alert($(this).val()); 
});