Чому ця функція клацання jQuery не працює?

116

Код:

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

Наведений вище код не працює. Коли я натискаю на #clicker, він не сповіщає і не приховує. Я перевірив консоль і не отримую помилок. Я також перевірив, чи завантажується JQuery, і справді це так. Тож не впевнений, у чому проблема. Я також зробив функцію готовності до документа з попередженням, і це спрацювало, щоб не знати, що я роблю неправильно. Будь ласка, допоможіть. Дякую!

— starbucks
джерело

3

Загорніть код у document.ready

— karthikr

1

Ви перевірили консоль браузера, якщо не знайдено помилок, синтаксису чи файлу чи чогось іншого?

— Сіддхарт Панді

1

Можливий дублікат Чому jQuery або метод DOM, такий як getElementById, не знаходить елемент?

— користувач4642212

180

Ви повинні додати код JavaScript у $(document).ready(function() {}); блок.

тобто

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

Як зазначено в документації jQuery : "Сторінкою не можна безпечно керувати, поки документ не буде" готовий ". JQuery виявить цей стан готовності для вас. Код, включений всередину $( document ).ready(), запускається лише після того, як сторінка Модель об'єкта документа (DOM) буде готова до JavaScript код для виконання "

— mobius
джерело

7

Як мені дурно !! Ще навчаюсь. Я подумав, що функція клацання не потрібна, оскільки вона активована при натисканні на файл document.ready там, де він завантажується при завантаженні сторінки.

— starbucks

7

@starbucks Не турбуйся надто багато, всі помиляються, а особливо, коли навчаються :)

— mobius

4

Функція готовності до документа налаштовує слухачів на основі того, що він знаходить на сторінці. Якщо цього не робити, вони ніколи не створюються. Однак найкращий спосіб зробити це - замість них делегувати функцію "on ()". Таким чином, будь-які елементи, додані на сторінку після завантаження, все одно працюватимуть!

— Шон Кендл

1

Крім того, за допомогою функції "ввімкнено" вам фактично не потрібно використовувати функцію готового документа. Він встановлює слухача на рівні документа, а потім розкреслює сторінку для прослуховування елементів. Ось чому трохи швидше бути трохи більш конкретним щодо того, який тип елементів ви хочете слухати, наприклад "div.listentome" на відміну від ".listentome". Замість перевірки кожного елемента для класу "listentome", у цьому прикладі він перевіряє лише діви.

— Шон Кендл

2

@SeanKendle - Це не так, як .on()працює. Ви можете (необов'язково) використовувати його для створення делегованих обробників, але в будь-якому випадку він не "зішкріб сторінки", він прив'язує слухача до конкретних елементів (елементів) в об'єкті jQuery, на який ви викликаєте його.

— nnnnnn

65

Я знайшов найкраще рішення цієї проблеми, використовуючи ON з $ (документ).

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

для ідентифікаційного початку з див. нижче:

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

нарешті через 1 тиждень мені не потрібно додавати тригер onclick. Я сподіваюся, що це допоможе багатьом людям

— користувач5636597
джерело

2

А, дякую, вищесказане не працювало для мене, але це зробило! (ймовірно, якась дивна взаємодія з кутовою та маршрутизацією)

— Flink

Як і Flink, я також вирішив проблему з цим. Дякую .. 100 upvote ..

— Зета

3

Він називається делегуванням і потрібен для динамічно вставленого або переміщеного контенту

— mplungjan

Цей працював на мене! Дякую :)

— Амріт Пал Сінгх

20

Ваш код може працювати без document.ready (), просто переконайтеся, що ваш сценарій після #clicker. Оформити цю демонстраційну версію: http://jsbin.com/aPAsaZo/1/

Ідея в готовій концепції. Якщо ви впевнені, що ваш сценарій - це найновіша річ на вашій сторінці або це після елементу, що впливає, він працюватиме.

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

Примітка: Вjsbinдемо замінити httpз httpsтам в коді, або використовувати цей варіант Demo

— СаідбакР
джерело

11

+1 - Ваша відповідь пояснює, чому потрібна document.ready()функція.

— Кевін

1

Це краща відповідь, оскільки припущення про те, що сценарій jquery повинен знаходитись у функції 'document.ready ()', вводить в оману. Так, там безпечніше, але якщо ви встановите html-елемент для функції jquery на льоту (наприклад, запитуйте рядок таблиці залежно від того, яку кнопку натиснули), вона повинна знаходитися поза / після цієї функції. Я помилково змінив назву цільового діва для своїх спливаючих накладок, а потім витратив кілька розчаруючих годин на пошуки помилки сценарію. Вивчений великий урок.

— johnlholden

Це неправильна відповідь, оскільки код JS повинен бути в голові DOM, а не в рядку. Той факт, що ви витратили кілька годин на пошуки помилки сценарію, не є проблемою JS, це проблема не в тому, щоб правильно прочитати документи та не знати, як користуватися інструментами для налагодження.

— Андрій Шипілов

@AndreyShipilov Хто сказав, що просто подивіться на джерело цієї сторінки та опустіться до її низу, там ви побачите код JavaScript.

— SaidbakR

1

@AndreyShipilov - чи знаєте ви , як використовувати засоби налагодження для усунення цієї проблеми? Тоді, будь ласка, поділіться своїми знаннями з іншими, а не ображаючи їх. Намагайтеся бути конструктивними та справедливими.

— Метт

6

Вам потрібно обгорнути свій Javascript-код на $(document).ready(function(){});Подивіться цю JSfiddle .

Код JS:

$(document).ready(function() {

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

— Паршива вівця
джерело

5

Спробуйте додати $(document).ready(function(){до початку свого сценарію, а потім });. Також, чи divмає ідентифікатор у ньому належним чином, тобто як id, а не клас тощо?

— tjons
джерело

3

Будьте впевнені, що на вашій кнопці немає нічого (такого діва чи прозорого зображення), що не дозволяє натискати кнопку. Це звучить нерозумно, але іноді ми думаємо, що jQuery не працює, і все, що наповнює і проблема, полягає в позиціонуванні елементів DOM.

— vicgilbcn
джерело

або, наприклад, z-індекс!

— даррен

3

Ви можете використовувати те, $(function(){ // code });що виконується, коли документ готовий виконати код всередині цього блоку.

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

— Ракієш Кададас
джерело

2

Просто швидка перевірка, якщо ви використовуєте двигун шаблону на стороні клієнта, такий як рулі, ваш js буде завантажений після документу. і перевірити поточну ціль

— Абхінав Сінгх
джерело

так правда, я використовую flask / jinja, і це не працює, якщо я не використовую властивість onclick в HTML і посилаюсь звідти на функцію в моєму <script>

— Rich Stone