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());
});

重新加载部分页面后，JQuery .on（）绑定不起作用

2 个答案: