Javascript / jQuery onclick不起作用

Question

我制作了一個test.html文檔來測試腳本。 不知怎的，它不起作用，我無法理解為什么沒有發生任何事情。 腳本在-tags中並用-tag包裝，而css也有-tags。 它為什么不起作用？ 這是代碼

<!DOCTYPE html>
<html>

    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
        </script>
        <script>
        $('#menu li a').on('click', function() {
            $('li a.current').removeClass('current');
            $(this).addClass('current');
        });
        </script>
        <style>
        .current {
            text-decoration: underline;
        }

        ul {
            list-style-type: none;
        }

        a {
            text-decoration: none;
        }
        </style>
    </head>

    <body>
        <div id="menu">
            <ul>
                <li><a id="about-link" class="current" href="#">ABOUT</a></li>
                <li><a id="events-link" href="#">EVENTS</a></li>
                <li><a id="reviews-link" href="#">REVIEWS</a></li>
                <li><a id="contact-link" href="#">CONTACT</a></li>
            </ul>
        </div>
    </body>

</html>

Answer 1

因為綁定事件處理程序的代碼是在DOM存在元素之前執行的，所以事件不會綁定在元素上。

要解決這個問題，你可以

將代碼包裝在ready()回調中，以便在DOM加載完成后執行代碼
將腳本移動到<body>的末尾，因此所有元素都存在於DOM ，您可以在其上綁定事件

碼：

$(document).ready(function () {
    $('#menu li a').on('click', function () {
        $('li a.current').removeClass('current');
        $(this).addClass('current');
    });
});

編輯

您還可以使用load （ 不推薦 ）事件回調來綁定事件，但這將等待所有資源完全加載。

如果要使用Vanilla Javascript，可以在document上使用DOMContentLoaded事件。

Answer 2

您正在加載DOM內容之前執行代碼。 將代碼放在就緒塊中。

Answer 3

您正在加載<body>標記之前執行JavaScript，其中包含<li>元素。

要解決此問題，您有三種選擇：

1.您可以在$(document).ready()回調中插入您編寫的JavaScript代碼。 （有關更多信息，請參閱http://www.w3schools.com/jquery/event_ready.asp ）

代碼：

$(document).ready(function () {
$('#menu li a').on('click', function () {
    $('li a.current').removeClass('current');
    $(this).addClass('current');
  });
});

2.您可以使用JavaScript內置的window.onload功能。 （有關更多信息，請參閱https://thechamplord.wordpress.com/2014/07/04/using-javascript-window-onload-event-properly/ ）

碼：

window.onload = function () {
$('#menu li a').on('click', function () {
    $('li a.current').removeClass('current');
    $(this).addClass('current');
  });
}

3.在頁面中的</body>標記前放置<script>標記。

碼：

<head>
    <style>
    .current {
        text-decoration: underline;
    }

    ul {
        list-style-type: none;
    }

    a {
        text-decoration: none;
    }
    </style>
</head>

<body>
    <div id="menu">
        <ul>
            <li><a id="about-link" class="current" href="#">ABOUT</a></li>
            <li><a id="events-link" href="#">EVENTS</a></li>
            <li><a id="reviews-link" href="#">REVIEWS</a></li>
            <li><a id="contact-link" href="#">CONTACT</a></li>
        </ul>
    </div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
    </script>
    <script>
    $('#menu li a').on('click', function() {
        $('li a.current').removeClass('current');
        $(this).addClass('current');
    });
    </script>
</body>

注意：使用$(document).ready()是比使用window.onload更好的選擇。 （有關更多信息，請參閱window.onload vs $（document）.ready（））

Answer 4

你的代碼很好。 只需將它包裝在DOM准備就緒就可以了。

$(document).ready(function(){
    $('#menu li a').on('click', function() {
        $('li a.current').removeClass('current');
        $(this).addClass('current');
    });
})

Javascript / jQuery onclick不起作用

問題描述

4 個解決方案

解決方案1
12 已采納 2015-08-26 09:31:30

解決方案2
8 2015-08-26 09:32:10

解決方案3
0 2015-08-26 10:34:27

解決方案4
0 2015-09-10 07:12:26

Javascript / jQuery onclick不起作用

問題描述

4 個解決方案

解決方案1 12 已采納 2015-08-26 09:31:30

解決方案2 8 2015-08-26 09:32:10

解決方案3 0 2015-08-26 10:34:27

解決方案4 0 2015-09-10 07:12:26

解決方案1
12 已采納 2015-08-26 09:31:30

解決方案2
8 2015-08-26 09:32:10

解決方案3
0 2015-08-26 10:34:27

解決方案4
0 2015-09-10 07:12:26