Почему эта функция jQuery click не работает?

код:

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

Ответы

Ответ 1

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

то есть.

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

Как Документация jQuery гласит: "Нельзя безопасно манипулировать страницей, пока документ не будет готов". jQuery обнаруживает это состояние готовности. Код, включенный внутри $( document ).ready(), запускается только после того, как страница Document Object Model (DOM) готова для выполнения кода JavaScript для

Ответ 2

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

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

для начала id, см. ниже:

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

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

Ответ 3

Ваш код может работать без 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

Ответ 4

Вы должны обернуть свой Javascript-код в $(document).ready(function(){}); Смотри этот JSfiddle.

Код JS:

$(document).ready(function() {

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

Ответ 5

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

Ответ 6

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

Ответ 7

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

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

Ответ 8

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