使用ajax获取的按钮不响应

Question

我有一个小问题。我有一个php页面，其内容为return一个使用ajax的按钮，如下所示：

HTML部分：

<a href="#" class="unit_register_button">
    Register
</a>

jQuery部分：

$('a.unit_register_button').click(function(e){

    e.preventDefault();
    alert('yaay');
});

问题：

该按钮不响应jQuery。

我尝试将带有按钮的html的确切行直接复制到页面，并在我click时工作正常。

解决方案是什么？为什么按钮在使用ajax显示时不起作用？

Answer 1

你应该使用event delegation

$(document).on("click","a.unit_register_button",function(e){
   e.preventDefault();
   alert('yaay');
});

事件委托允许您将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有子项触发，无论这些子项现在是存在还是将来添加。

Answer 2

有几种方法，其中一种方法是使用on函数：

$(document).on('click', 'a.unit_register_button', function(e){

    e.preventDefault();
    alert('Alert message');
});

另一个是delegate函数：

$(document).delegate('a.unit_register_button', 'click', function(e){

    e.preventDefault();
    alert('Alert message');
});

这里jsfiddle有工作示例。

希望这有帮助。