我是一个学习jQuery和web开发的初学者,所以这可能是一个愚蠢的问题,但我无法在Google上找到答案(可能我没有找到合适的关键字).我有一个简单的HTML文件(比如'test.html'加载jQuery,我写的外部javascript文件(比如'test.js'),里面有一个按钮.例如,
<html>
....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="scripts/test.js" type="text/javascript"></script>
....
<body>
<button type="button" class="button" id="my_button">test</button>
</body>
</html>
在'test.js'中,我有:
$( "#my_button" ).click(function() {
alert('test');
return false;
});
但是当我点击按钮时,它不起作用.但是,当我把'test.js'中的内容放在'test.html'中时,就像这样:
<html>
....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$( "#my_button" ).click(function() {
alert('test');
return false;
});
});
</script>
....
<body>
<button type="button" class="button" id="my_button">test</button>
</body>
</html>
有用.第一个问题是:当我在外部文件中插入代码并加载它时,有人可以解释为什么它会起作用吗？是否总是需要将jQuery代码包装起来$(function() {......}以使其工作？
理想情况下,我不想在我的HTML模板中使用javascript代码,因为它显然很混乱.相关/第二个问题是:如上所述分离javascript/jQuery代码并使其在预期的HTML模板中工作的最干净/最好的方法是什么？
谢谢您的回答.
sim*_*gus 11
$(document).ready(function() {
$( "#my_button" ).click(function() {
alert('test');
return false;
});
});
Thi*_*tes 10
你需要让$(function(){...})让你的点击功能起作用.它告诉jquery文档已加载,它可以开始处理DOM.在此之前,DOM尚未就绪,您的元素可能不存在.
编辑:也可以 将它用于外部文件,除非您更高级,并知道何时不使用它.
| 归档时间： |
|
| 查看次数： |
19891 次 |
| 最近记录： |