javascript - Varför fungerar inte denna jQuery click-funktion?

Kod :

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();
    });
</script>

Koden ovan fungerar inte. När jag klickar på #clicker så visas ingen alert och det göms inte heller. Jag kollade konsolen och fick inga fel. Jag kontrollerade också om JQuery laddades och det gör det verkligen. Så jag är inte säker på vad problemet är. Jag gjorde även en document ready-funktion med en alert och det fungerade, så jag är inte säker på vad jag gör fel. Snälla hjälp. Tack!

Svar #1

Du ska lägga till JavaScript-koden i ett $ (document).ready(function() {});-block.

dvs.

$(document).ready(function() {
  $("#clicker").click(function () {
    alert("Hello!");
    $(".hide_div").hide();
  });
});

Som jQuery-dokumentation anger: "En sida kan inte manipuleras säkert förrän dokumentet är 'redo'." jQuery upptäcker detta beredskapsläge åt dig. Kod som ingår inom $ ( document ).ready() kommer endast att köras när sidans Document Object Model (DOM) är redo för att JavaScript-kod ska kunna köras

Svar #2

Jag hittade den bästa lösningen på detta problem genom att använda ON med $ (document).

 $(document).on('click', '#yourid', function() { alert("hello"); });

för id som börjar med se nedan:

$(document).on('click', 'div[id^="start"]', function() {
alert ('hello'); });

äntligen efter 1 vecka behöver jag inte lägga till onclick-trigger. Jag hoppas att detta kommer att hjälpa många människor

Svar #3

Din kod kan fungera utan document.ready(), se bara till att ditt skript kommer efter #clicker. Kolla in denna demo: http://jsbin.com/aPAsaZo/1/

Idén i det färdiga konceptet. Om du är säker på att ditt skript är det senaste på din sida eller om det är efter det påverkade elementet, kommer det att fungera.

<!DOCTYPE html>
<html>
<head>


<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
  <a href="#" id="clicker" value="Click Me!" >Click Me</a>
  <script type="text/javascript">

        $("#clicker").click(function () {
            alert("Hello!");
            $(".hide_div").hide();

        });


</script>

</body>
</html>

Meddelande: I jsbin-demot ersätt http med https där i koden, eller använd denna variant Demo

Relaterade artiklar