Waarom werkt deze jQuery-klikfunctie niet?

Code:

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

De bovenstaande code werkt niet. Als ik op #clicker klik, wordt er niet gewaarschuwd en wordt het niet verborgen. Ik heb de console gecontroleerd en ik krijg geen fouten. Ik heb ook gecontroleerd of JQuery aan het laden was en dat is inderdaad zo. Dus weet niet zeker wat het probleem is. Ik deed ook een document-ready-functie met een waarschuwing en dat werkte, dus ik weet niet zeker wat ik verkeerd doe. Help alstublieft. Bedankt!


Antwoord 1, autoriteit 100%

Het is de bedoeling dat je de javascript-code toevoegt in een $(document).ready(function() {});-blok.

d.w.z.

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

Zoals jQuery-documentatiestelt: “Een pagina kan niet veilig worden gemanipuleerd totdat het document ‘klaar’ is. jQuery detecteert deze staat van gereedheid voor u. Code die is opgenomen in $( document ).ready()wordt alleen uitgevoerd zodra de pagina Document Object Model (DOM) is klaar om JavaScript-code uit te voeren”


Antwoord 2, autoriteit 42%

Ik heb de beste oplossing voor dit probleem gevonden door AAN te gebruiken met $(document).

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

voor id begint met zie hieronder:

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

eindelijk na 1 week hoef ik geen onclick-trigger toe te voegen.
Ik hoop dat dit veel mensen zal helpen


Antwoord 3, autoriteit 10%

Je code werkt mogelijk zonder document.ready() zorg er wel voor dat je script achter de #clicker staat. Bekijk deze demo: http://jsbin.com/aPAsaZo/1/

Het idee in het kant-en-klare concept. Als je zeker weet dat je script het nieuwste is op je pagina of achter het betreffende element zit, zal het werken.

<!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>

Opmerking:
In de jsbindemo vervang httpmet httpsin de code, of gebruik deze variant Demo


Antwoord 4, autoriteit 2%

Probeer het toevoegen van $(document).ready(function(){naar het begin van uw script en vervolgens });. Ook heeft de divHEEFT DE ID IN HET OPNIEUW, D.U.Z., als een ID, geen klasse, enz.?


Antwoord 5, Autoriteit 2%

U moet uw JavaScript-code inpakken met $(document).ready(function(){});KIJK DIT JSFiddle .

JS-code:

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

Antwoord 6

Zorg ervoor dat er niets op uw knop (een dergelijk div of een trasparent IMG) is dat niet op de knop klikt.
Het klinkt stom, maar soms denken we dat jQuery niet werkt en al die spullen en het probleem op de positionering van DOM-elementen.


Antwoord 7

U kunt $(function(){ // code });die wordt uitgevoerd wanneer het document klaar is om de code binnen dat blok uit te voeren.

$(function(){
    $('#clicker').click(function(){
        alert('hey');
        $('.hide_div').hide();
    });
});

Antwoord 8

Een snelle cheque, als u client-side-sjablonerende motor zoals stuur gebruikt, wordt uw JS na het document laden. Vandaar dat er geen element zal zijn om het evenement te binden, dan gebruikt u ofwel gebruik van onClick-handler of op het lichaam en controleer op het huidige doel


Antwoord 9

juiste browser opnieuw laden

Kijk ook even of je je js-bestanden apart bewaart: zorg ervoor dat je je bronnen goed herlaadt. Browsers slaan meestal bestanden op in de cache, dus zorg er gewoon voor dat een eerdere typefout is gecorrigeerd in uw geladen bronnen.

Zie dit antwoordvoor het permanent uitschakelen van de cache in Chrome/Chromium. Anders kunt u over het algemeen een volledige herlaadbeurt forceren met Ctrl+F5of Shift+F5zoals vermeld in dit antwoord.

Other episodes