Почему эта функция щелчка 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, и действительно ли это так. Так что не уверен, в чем проблема. Я также сделал функцию готовности документа с предупреждением, и это сработало, поэтому я не уверен, что я делаю не так. Пожалуйста помоги. Спасибо!

— Старбакс
источник

3

Оберните код в document.ready

— karthikr

1

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

— Сиддхарт Пандей

1

Возможный дубликат Почему jQuery или метод DOM, такой как getElementById, не находит элемент?

— user4642212

180

Вы должны добавить код javascript в $(document).ready(function() {});блок.

т.е.

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

Как указано в документации jQuery : «Страницей нельзя безопасно управлять, пока документ не будет« готов ». JQuery определяет это состояние готовности за вас. Код, включенный в него, $( document ).ready()будет запускаться только после того, как объектная модель документа (DOM) страницы будет готова для JavaScript код для выполнения "

— мебиус
источник

7

Как я глуп !! Все еще учусь. Я думал, что функция click мне не нужна, так как она активируется при нажатии vs document.ready, где она загружается при загрузке страницы.

— Starbucks

7

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

— Мебиус

4

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

— Шон Кендл,

1

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

— Шон Кендл,

2

@SeanKendle - Это не так .on(). Вы можете (необязательно) использовать его для создания делегированных обработчиков, но в любом случае он не «очищает страницу», а привязывает слушателя к конкретным элементам в объекте jQuery, для которого вы его вызываете.

— nnnnnn

65

Я нашел лучшее решение этой проблемы, используя ON с $ (document).

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

для начала идентификатора см. ниже:

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

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

— user5636597
источник

2

Ах, спасибо, это не сработало для меня, но это сработало! (возможно, какое-то странное взаимодействие с angular и маршрутизацией)

— Flink

Так же, как и Flink, я тоже решил проблему с этим. Спасибо .. 100 голосов за ..

— Zeta

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>

Примечание: вjsbindemo замените httpна httpsтам в коде, или используйте этот вариант Demo

— SaidbakR
источник

11

+1 - Ваш ответ объясняет, зачем нужна document.ready()функция.

— Кевин

1

Это лучший ответ, потому что предположение, что сценарий jquery должен находиться внутри функции document.ready (), вводит в заблуждение. Да, там безопаснее, но если вы настраиваете элемент html для функции jquery на лету (например, запрашиваете строку таблицы в зависимости от того, какая кнопка нажата), он должен находиться вне / после этой функции. Я по ошибке изменил имя целевого div для всплывающих окон, а затем потратил несколько разочаровывающих часов на поиски ошибки скрипта. Большой урок извлечен.

— johnlholden

Это неправильный ответ, потому что код JS должен находиться в заголовке DOM, а не в строке. Тот факт, что вы потратили несколько часов на поиск ошибки скрипта, не является проблемой JS, это ваша проблема, если вы не читаете документы должным образом и не знаете, как использовать инструменты отладки.

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

@AndreyShipilov Кто это сказал, просто посмотрите на исходный код этой страницы и спуститесь вниз, вы увидите там код javascript.

— SaidbakR

1

@AndreyShipilov - знаете ли вы , как использовать инструменты отладки для устранения этой проблемы? Тогда, пожалуйста, поделитесь своими знаниями с другими, а не оскорбляйте их. Постарайтесь быть конструктивными и справедливыми.

— Мэтт

6

Вам нужно обернуть свой Javascript-код с помощью $(document).ready(function(){});Look this JSfiddle .

Код JS:

$(document).ready(function() {

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

— Черная овца
источник

5

Попробуйте добавить $(document).ready(function(){в начало вашего скрипта, а затем });. Кроме того, divправильно ли указан идентификатор, т.е. как идентификатор, а не как класс и т. Д.?

— tjons
источник

3

Убедитесь, что на вашей кнопке (например, div или trasparent img) нет ничего, что удерживало бы ее от нажатия. Это звучит глупо, но иногда мы думаем, что jQuery не работает и все такое, и проблема заключается в позиционировании элементов DOM.

— vicgilbcn
источник

или, например, z-index!

— a darren

3

Вы можете использовать $(function(){ // code });which выполняется, когда документ готов выполнить код внутри этого блока.

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

— Ракеш Кадас
источник

2

Просто быстрая проверка: если вы используете клиентский шаблонизатор, такой как handlebars, ваш js будет загружаться после document.ready, следовательно, не будет элемента для привязки события, поэтому либо используйте обработчик onclick, либо используйте его в теле и проверьте текущую цель

— Абхинав Сингх
источник

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

— Rich Stone