Question

我试图获得onclick工作，但它没有...... 这是我的代码：

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title>jQuery alert test</title>
    <meta charset="utf-8" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">        
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script>
        $('#submit').click(function(){
            alert('This onclick function forks!');
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="text-center">
            <a class="btn btn-primary" id="submit">Submit</a>
        </div>
    </div>
</body>
</html>

有人可以告诉我，为什么这个onclick不起作用？

Answer 1

在加载DOM元素之前，您的JS正在被淘汰。因此，您的事件处理程序未附加到该元素，因为它当时不存在。

用DOM ready handler包裹您的JS：

$(document).ready(function () {
    $('#submit').click(function(){
        alert('This onclick function forks!');
    });
});

您也可以使用event delegation，因为执行时document对象存在：

$(document).on('click', '#submit', function () {
    alert('This onclick function forks!');
});

Answer 2

可能缺少JQuery库..然后在代码上添加：

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

Answer 3

您需要等待文档准备就绪。您正试图在页面确实存在的内容上附加点击事件。

修正范围从：

将脚本块移动到页面底部。
或使用jQuery的文档就绪，例如$(document).ready(function () { ... });或$(function() { ... });

当然，如果您使用jQuery是为了附加和事件监听器，那么我首先要证明使用jQuery，但那只是我。

Answer 4

虽然接受的答案（使用ready）有效，但这不是最佳做法。

最佳做法是将script标记放在文档的结尾上，就在结束</body>标记之前，请注意以下注释：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title>jQuery alert test</title>
    <meta charset="utf-8" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">        
    <!-- NO SCRIPTS HERE -->
</head>
<body>
    <div class="container">
        <div class="text-center">
            <a class="btn btn-primary" id="submit">Submit</a>
        </div>
    </div>

    <!-- SCRIPTS GO HERE -->
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script>
        $('#submit').click(function(){
            alert('This onclick function forks!');
        });
    </script>
</body>
</html>

那样

代码运行时存在元素
下载外部脚本不会阻止页面显示

更多YUI Best Practices for Speeding Up Your Web Site。

jQuery onclick不起作用

4 个答案: