在AJAX发布内容按钮上使用jQuery .click（）

Question

我有运行AJAX功能的选择。 此函数返回带有按钮的表单。 现在我想给一个函数分配给该按钮与jQuery的.click()或.on()

例如

<select id='test'>
    <option val='1'>...</option>
    ...
</select>

/* Empty and filled with AJAX call */
<div id="ajax">
     /* FOLLOWING THE CONTENT RETURNED BY THE AJAX CALL */
     /* Won't work (see script below) */
     <input type="button" id="button" value="button" />

     /* will work */
     <input type="button" value="button" onclick="clickMe()" />
</div>

的JavaScript

$('#test').change(function(){
    $.ajax({
        ...
});

$('#button').click(function(){
    /* DOESN'T WORK */
    alert('click')
});

function clickMe(){
    /* WORKS */
    alert('click')
};

有没有办法“启用” AJAX结果？

Answer 1

您需要使用event delegation方法，因为按钮是动态创建的。 您可以使用jQuery on()方法来监听按钮。

$("#ajax").on("click","#button",function(){
    alert('click')
});

否则，事件不会绑定到动态生成的项目。

Answer 2

我同意@Pranav C Balan，这是解决问题的一种方法。 我提议另一种方式：在ajax响应之后，您可以将事件绑定到添加的标记中。 喜欢：

$.get("test.jsp",function(response){
    $("#ajax").children("#button").click(function(){
       // click callback goes here...
    });
},"html")

提示：不要在回调函数中嵌套更多两个func。 这将成为意大利面条代码。要解决此问题，您可以在jquery中使用promise。 这是文档。 （JXHR对象）

Answer 3

使用.on()函数以及与按钮匹配的选择器，将事件分配给动态表单之前的最高元素。

这会将事件附加到所有当前和将来的匹配元素。

$("#ajax").on("click", "#myButtonId", function(){
    // On click code here.
});

Answer 4

您应该使用jQuery的.on()侦听冒泡到父元素的事件。 这意味着在设置了事件侦听器之后 ，它仍将为添加的元素触发事件。

$('#ajax').on('click','#button',function(){
    alert('click');
});

有关以下内容，请参见jQuery文档： http : //api.jquery.com/on/