Связывание 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()); 
});