Question

我有一个按钮，点击后使用AJAX <input>加载。在我的JS中有一个连接到页面的事件处理程序。我试图在同一个JS中为<input>声明事件处理程序，但它们似乎不起作用。

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="script2.js"></script>
<button>load</button>

JS

$('button').click(function () {
    $.ajax({
        url: 'additional.html',
        context: document.body,
    }).done(function(html) {
        $('body').append(html);
    })
});
$('input').click(function () {
    alert('aasd');
});

我已经制作了test page，但是只有在将JS插入Chrome的Web控制台之后一切都有效（由于未知原因<head>中的连接脚本不起作用）

Answer 1

您应该在案例中使用事件委派.on。有关.on

的完整参考，请阅读here

试试这个，

$(document).on('click','input',function () {
    alert('aasd');
});

Answer 2

使用此代码：

<script type="text/javascript">
$(document).ready(function(){ 
$('#cl').click(function () {
$.ajax({
    url: 'additional.html',
    context: document.body,
}).done(function(html) {
    $('body').append(html);
})
});
});
$(document).ready(function(){   
$('#cl').click(function () {
alert('aasd');
});
});
</script>

<button id="cl">load</button>

如何声明将通过AJAX加载的元素的事件处理程序？

2 个答案: