javascript - 在 AJAX 发布内容按钮上使用 jQuery .click()

Question

我有一个运行 AJAX 函数的 select。该函数返回一个带有按钮的表单。现在我想使用 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')
});

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