Dlaczego ta funkcja klikania jQuery nie działa?

116

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>

Powyższy kod nie działa. Kiedy klikam #clicker, nie ostrzega i się nie ukrywa. Sprawdziłem konsolę i nie dostaję żadnych błędów. Sprawdziłem też, czy ładuje się JQuery i rzeczywiście tak jest. Więc nie jestem pewien, na czym polega problem. Zrobiłem również funkcję gotowości dokumentu z ostrzeżeniem, która zadziałała, więc nie jestem pewien, co robię źle. Proszę pomóż. Dzięki!

javascript jquery onclick click onclicklistener starbucks
źródło
3
Owiń kod w document.ready
karthikr
1
czy sprawdziłeś konsolę przeglądarki, czy są jakieś błędy, składnia lub plik nie został znaleziony lub coś innego?
Siddharth Pandey
1
Możliwy duplikat Dlaczego jQuery lub metoda DOM, taka jak getElementById, nie znajduje elementu?
user4642212

Odpowiedzi:

180

Powinieneś dodać kod javascript w $(document).ready(function() {});bloku.

to znaczy

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

Jak stwierdza dokumentacja jQuery : „Nie można bezpiecznie manipulować stroną, dopóki dokument nie będzie„ gotowy ”. JQuery wykryje ten stan gotowości. Kod zawarty w środku $( document ).ready()zostanie uruchomiony tylko wtedy, gdy strona Document Object Model (DOM) będzie gotowa do obsługi JavaScript kod do wykonania "

mobius
źródło
7
Idiota ze mnie!! Wciąż się uczę. Myślałem, że funkcja klikania nie potrzebuje jej, ponieważ jest aktywowana po kliknięciu w porównaniu z dokumentem. Już tam, gdzie ładuje się podczas ładowania strony.
starbucks
7
@starbucks Nie przejmuj się tym zbytnio, każdy popełnia błędy, a zwłaszcza podczas nauki :)
mobius
4
Funkcja gotowości dokumentu konfiguruje słuchaczy na podstawie tego, co znajdzie na stronie. Jeśli tego nie zrobisz, nigdy nie zostaną skonfigurowane. Najlepszym sposobem na to jest jednak delegowanie ich za pomocą funkcji „on ()”. W ten sposób wszelkie elementy dodane do strony po załadowaniu będą nadal działać!
Sean Kendle
1
Ponadto, dzięki funkcji „on”, nie musisz w rzeczywistości używać funkcji gotowości dokumentu. Ustawia słuchacza na poziomie dokumentu, a następnie zeskrobuje stronę w poszukiwaniu elementów, których mają słuchać. Dlatego trochę szybciej jest trochę dokładniej określić, jakiego typu elementu chcesz słuchać, np. „Div.listentome” w przeciwieństwie do „.listentome”. Zamiast sprawdzać każdy element pod kątem klasy „listentome”, w tym przykładzie sprawdza tylko elementy div.
Sean Kendle
2
@SeanKendle - Tak nie .on()działa. Możesz (opcjonalnie) użyć go do tworzenia delegowanych programów obsługi, ale tak czy inaczej nie „zeskrobuje strony”, wiąże nasłuchiwanie z określonymi elementami w obiekcie jQuery, do którego go wywołujesz.
nnnnnn
65

Znalazłem najlepsze rozwiązanie tego problemu, używając ON z $ (dokument).

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

id zacznij od patrz poniżej:

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

wreszcie po 1 tygodniu nie muszę dodawać trygera onclick. Mam nadzieję, że pomoże to wielu ludziom

user5636597
źródło
2
Ach dzięki, powyższe nie zadziałało, ale zadziałało! (prawdopodobnie dziwna interakcja z kątowością i routingiem)
Flink
Podobnie jak Flink rozwiązałem z tym problem. Dzięki ... 100 głosów za ...
Zeta
3
Nazywa się to delegacją i jest potrzebne do dynamicznie wstawianych lub przenoszonych treści
mplungjan
Ten pracował dla mnie! Dzięki :)
Amrit Pal Singh
20

Twój kod może działać bez document.ready (), po prostu upewnij się, że skrypt znajduje się po znaku #clicker. Sprawdź to demo: http://jsbin.com/aPAsaZo/1/

Pomysł w gotowej koncepcji. Jeśli masz pewność, że skrypt jest najnowszą rzeczą na Twojej stronie lub znajduje się po elemencie, którego dotyczy problem, zadziała.

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

Uwaga: wjsbindemo zastąpić httpze httpstam w kodzie, lub korzystać z tego wariantu Demo

SaidbakR
źródło
11
+1 - Twoja odpowiedź wyjaśnia, dlaczego potrzebujemy tej document.ready()funkcji.
Kevin
1
To lepsza odpowiedź, ponieważ sugestia, że ​​skrypt jquery musi znajdować się w funkcji „document.ready ()”, jest myląca. Tak, jest tam bezpieczniej, ale jeśli ustawisz element html dla funkcji jquery w locie (na przykład zapytaj wiersz tabeli w zależności od tego, który przycisk zostanie kliknięty), musi on znajdować się na zewnątrz / po tej funkcji. Przez pomyłkę zmieniłem nazwę docelowego elementu div dla moich wyskakujących nakładek, a następnie spędziłem kilka frustrujących godzin, szukając błędu skryptu. Wielka lekcja.
johnlholden
To zła odpowiedź, ponieważ kod JS powinien znajdować się w nagłówku DOM, a nie w tekście. Fakt, że spędziłeś kilka godzin na szukaniu błędu skryptu, nie jest problemem JS, to twój problem z nieprawidłowym czytaniem dokumentacji i brakiem wiedzy, jak używać narzędzi do debugowania.
Andrey Shipilov
@AndreyShipilov Kto tak powiedział, spójrz tylko na źródło tej strony i zejdź na dół, zobaczysz tam kod javascript.
SaidbakR
1
@AndreyShipilov - czy pan wie, jak korzystać z narzędzi debugowania, aby rozwiązać ten problem? Więc proszę, podziel się swoją wiedzą z innymi, zamiast ich obrażać. Staraj się być konstruktywny i uczciwy.
Matt
6

Musisz opakować swój kod JavaScript w $(document).ready(function(){});Look this JSfiddle .

Kod JS:

$(document).ready(function() {

    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();    
    });
});
Czarna Owca
źródło
5

Spróbuj dodać $(document).ready(function(){na początku swojego skryptu, a następnie });. Ponadto, czy dividentyfikator ma w sobie poprawnie, tj. Jako identyfikator, a nie klasa, itp.?

tjons
źródło
3

Upewnij się, że na Twoim przycisku nie ma nic (np. Element DIV lub przezroczysty obraz), co powstrzymuje go przed kliknięciem. Brzmi to głupio, ale czasami wydaje nam się, że jQuery nie działa i to wszystko się komplikuje, a problem dotyczy pozycjonowania elementów DOM.

vicgilbcn
źródło
lub na przykład z-index!
darren
3

Możesz użyć $(function(){ // code });które jest wykonywane, gdy dokument jest gotowy do wykonania kodu wewnątrz tego bloku.

$(function(){
    $('#clicker').click(function(){
        alert('hey');
        $('.hide_div').hide();
    });
});
Rakyesh Kadadas
źródło
2

Tylko szybkie sprawdzenie, jeśli używasz silnika szablonów po stronie klienta, takiego jak kierownica, twój js załaduje się po dokumencie. Już, stąd nie będzie żadnego elementu do powiązania zdarzenia, dlatego użyj obsługi onclick lub użyj go na treści i sprawdź aktualny cel

Abhinav Singh
źródło
to prawda, używam flask / jinja i nie działa, chyba że użyję właściwości onclick w kodzie HTML i odniosę się stamtąd do funkcji w moim <script>
Rich Stone