jQuery 代码不会在模态表单上触发

Question

我有一个简单的链接，可以触发 ajax 调用并更改状态，我希望新状态（立即）反映在模态表单上。

问题是：当我单击模态表单上的链接（如下）时，什么也没有发生。

<a title="Autoplay" data-placement="top" data-toggle="tooltip" class="glyphicon glyphicon-stop" id="autoplayStatus" href="#"></a>

在 $(document).ready() 中，我有这个：

$("#autoplayStatus").click(function(event){
        alert('test');
    })

我应该做些什么来确保 jQuery 可以选择并绑定到模态表单上的对象？

Answer 1

为了确保 jQuery 绑定到 Bootstrap 创建的模态中的按钮（或其他东西），您应该像这样编写事件处理程序：

$(document).ready(function() {
    $('.container').on('click', '#autoplayStatus', function() {
        alert('Ohai!');
    });
});

然后，在我的示例中，将锚标记包装在容器中：

<div class="container">
    <a title="Autoplay" data-placement="top" data-toggle="tooltip" class="glyphicon glyphicon-stop" id="autoplayStatus" href="#"></a>
</div>

顺便说一句，在创建按钮时，最好使用<button> 而不是<a>。 =)