Question

所以我有一个非常简单的代码，包含表单和一个按钮使用jQuery我想在用户点击该按钮时绑定一些动作，但是某些原因它无法正常工作

这是代码

<!DOCTYPE html> 
<html> 
<head> 
 <script src="jquery.js"></script> 
</head> 
<body> 
<script> 
$('#jallerysubmit').bind('click', function() {
 alert('asd');
})
</script> 

<form> 
<input type="checkbox" name="box1">box1<br> 
<input type="checkbox" name="box1">box2<br> 
<input type="button" id="jallerysubmit" value="Proved"> 

</form> 
</body> 
</html>

请告知此代码有什么问题，因为它不起作用，即使它不会产生任何错误

Answer 1

您需要将其包装在document ready处理程序中。

<script> 
$(function() {
  $('#jallerysubmit').bind('click', function() {
    alert('asd');
  });
});
</script>

文档：http://api.jquery.com/ready/

Answer 2

JavaScript代码将在加载DOM之前执行，因此无法找到ID为jallerysubmit的元素（它尚不存在）。

@ sje397描述了一种非常常见的方式（至少在使用jQuery时）如何解决这个问题。另一种方法是将脚本放在文档的末尾：

<html> 
   <head> 
       <script src="jquery.js"></script> 
    </head> 
    <body> 
        <form> 
            <input type="checkbox" name="box1">box1<br> 
            <input type="checkbox" name="box1">box2<br> 
            <input type="button" id="jallerysubmit" value="Proved"> 
        </form>
        <script> 
            $('#jallerysubmit').bind('click', function() {
                 alert('asd');
            });
        </script> 
    </body> 
</html>

Answer 3

附加处理程序的代码正在DOM中元素存在之前执行，因此选择器不返回任何内容，并且不应用处理程序。将代码放在文档就绪处理程序中，它应该工作。您还可以使用click快捷方式进行简化。

<script> 
   $(function() {
       $('#jallerysubmit').click(function() {
           alert('asd');
       });
   });
</script>

Answer 4

加入警告（“你好”）;之后确保jQuery正常工作。然后在提交句柄的末尾添加一个返回false，以确保在单击按钮时页面不会重新加载，也可以使用document.ready。见下面的代码

<!DOCTYPE html> 
<html> 
<head> 
 <script src="jquery.js"></script> 
</head> 
<body> 
<script> 
$(document).ready(function(){
alert("hello");

$('#jallerysubmit').bind('click', function() {
 alert('asd');
 return false;
});

});
</script> 

<form> 
<input type="checkbox" name="box1">box1<br> 
<input type="checkbox" name="box1">box2<br> 
<input type="button" id="jallerysubmit" value="Proved"> 

</form> 
</body> 
</html>

Answer 5

最佳做法是使用外部.js文件，例如script.js：

$(document).ready(function() {
    yourFunction();
});

function yourFunction() {
    $('#jallerysubmit').click(function() {
        alert('asd');
    });
}

并将其导入标记头中的html文件中：

<script type="text/javascript" src="script.js"></script>

Answer 6

始终在

中使用jquery功能

(document).ready(function(){//ur jquery codes});

或

$().ready(function(){//ur jquery codes});

或

$.noConflict(); jQuery(document).ready(function($){//ur codes});

一旦加载了页面的DOM，就会启动就绪功能。所以我建议jquery爱好者总是在这段代码中编写他们的魔法代码

jQuery单击功能不起作用

6 个答案: