Почему эта функция щелчка 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
Вы проверили консоль браузера, есть ли какие-либо ошибки, синтаксис или файл не найден или что-то еще?
Сиддхарт Пандей

Ответы:

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>

Примечание: вdemo замените 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