jQuery侦听器单击不起作用答案

【问题标题】：jQuery listener click not workingjQuery侦听器单击不起作用
【发布时间】：2011-11-24 08:00:31
【问题描述】：

所以我有这段代码应该监听#button的点击，但它不起作用，让我发疯！

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
    $('#button').click(function() {
        alert('OK!');
    });
</script>

和 HTML：

<input id="button" type="button" value="OK" />

这很奇怪。欢迎任何帮助！

【问题讨论】：

标签： javascript jquery function button listener

【解决方案1】：

在 document.ready 函数中编写代码

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script> 
<script type="text/javascript">
$(document).ready(function() {
    $('#button').click(function() {
        alert('OK!');
    });
});
</script>


 OR
<script type="text/javascript">
    function on_click() {
          alert("OK !!");
    }
    $(document).ready(function() { 
         $("#button").click(on_click);
    });
</script>

希望你能从中得到一些想法

【讨论】：

我可以将此逻辑应用到整个 'functions.js' 文件吗？
是的，你也可以在 js 文件中应用它
尝试将我的函数文档中的所有内容包装在 $(document).ready(function() { FUNCTIONS etc });行不通。
不要包装函数..函数写在document.ready..只有你的逻辑写在ready里面..我会稍微更新我的代码
好的，谢谢。我希望可以添加一些东西到批量代码中，因为我有很多听众最近停止了工作，所以......

【解决方案2】：

代码如下所示：

<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script> 
<script type="text/javascript"> 
    // Now that jquery is include, place the code to wire up the button here
    $(function(){
        // Once the document.onload event fires, attach the click
        // event handler for the button
        $('#button').click(function() { 
            alert('OK!'); 
        });
    });
</script> 
<input id="button" type="button" value="OK" />

这是与此相关的 jquery 文档： http://docs.jquery.com/How_jQuery_Works

【讨论】：

对此进行投票，因为它更好地解释了为什么原始代码不起作用，并指出了 $(function() {}); 的详细信息。工作。
一点建议，.click(function)(){ 不会在触摸设备上触发，为此，您可以使用 .on('click', function () {
@Hackinet 实际上.click(function(){ 只是.on('click', function() { 的简写，所以它们的工作方式完全相同。