单击后执行jQuery函数

Question

我正在努力处理以下内容：

<script>
$('button').click(function(){
alert("button clicked");
});
</script>

<button type="button" class="button-save">Save</button>

单击按钮时没有收到警报。 我尝试使用按钮定位课程，但这也无济于事。 当我像这个答案一样单击“保存”按钮时，我试图执行一些ajax（当然不是我的示例），因此我需要查找用户单击按钮的时间。

有人可以帮忙吗？

Answer 1

您必须等待页面完全呈现以绑定处理程序，否则元素尚不存在。 您有两个选择，可在呈现HTML之后将script标签移动到：

<button type="button" class="button-save">Save</button>

<script>
    $('button').click(function(){
        alert("button clicked");
    });
</script>

或将代码包装在DOM ready语句中。

<script>
    $(document).ready(function() {
        $('button').click(function(){
            alert("button clicked");
        });
    });
</script>

<button type="button" class="button-save">Save</button>

Answer 2

在您的html页面的头部添加此行

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

并将代码重写为：

$( document ).ready(function() {
   $('button').click(function(){
       alert("button clicked");
   });
});

Answer 3

您需要像这样包装代码：

$(document).ready( function() {
    // your code goes here
});

上面的代码基本上说：“将文档及其所有元素加载到文档中并准备好运行。然后执行代码。”