Блог

Главная - Вопросы по программированию - Показывать оповещение javascript и выполнять другие действия?

Показывать оповещение javascript и выполнять другие действия?

#javascript #jquery

#javascript #jquery

Вопрос:

Вот мой код, и ничего не происходит:

 <!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-git.js"></script>

<script>
$(".clickMe").click(function() {
   alert('hi!');
   // Do other stuff
});
</script>

</head>
<body>

<div class="clickMe">Click Me!</div>

</body>
</html>

Однако ничего не происходит, когда вы нажимаете на div «clickMe».

Спасибо!

Ответ №1:

Пусть документ будет готов

 $(function(){
    $(".clickMe").click(function() {
       alert('hi!');
       // Do other stuff
    });
})

Как у вас было, div еще недоступен (DOM не загружен), поэтому обработчик кликов не добавлен. Вам нужно дождаться, пока документ будет доступен. Для этого следует использовать .ready().

 $(document).ready(function() {...})
$(function() {...}) - Shortcut

Ответ №2:

Попробуйте обернуть код jQuery внутри этого:

 $(document).ready(function() {
  // Handler for .ready() called.
});

Когда вы выполняете существующий код в head, clickMe div не существует.

Ответ №3:

Попробуйте это:

 <!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $(".clickMe").click(function() {
   alert('hi!');
   // Do other stuff
   });
});

</script>

</head>
<body>

<div class="clickMe">Click Me!</div>

</body>
</html>

Вы, сравнивая различия, найдете решение. В основном это строка: $ (document).готово(функция(){});

Ответ №4:

DOM еще не загружен при выполнении вашего кода JavaScript. Вы должны добавить код в .ready() обратный вызов. Затем код выполняется, когда браузер анализирует HTML, и jQuery может найти элементы:

 $(function() {

    $(".clickMe").click(function() {
       alert('hi!');
       // Do other stuff
    });

});

$(function(){..}); является сокращением для $(document).ready(function(){...}) .

ДЕМОНСТРАЦИЯ

Ответ №5:

Скрипт запускается еще до того, как .clickMe элемент еще существует. Оберните свой код в dom-готовый обратный вызов:

 $(function() {
    $(".clickMe").click(function() {
        alert('hi!');
        // Do other stuff
    });
});

Другим решением было бы переместить ваш скрипт ниже определения элемента, но использование события dom ready намного чище.

Ответ №6:

Проблема в том, что вы подключаете обработчик событий до того, как элемент будет отображен в DOM. Попробуйте это вместо:

 <!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-git.js"></script>

<script>
$(document).ready(function() {
    $(".clickMe").click(function() {
       alert('hi!');
       // Do other stuff
    });
});
</script>

</head>
<body>

<div class="clickMe">Click Me!</div>

</body>
</html>

Код передан в $(document).функция ready будет выполнена, как только страница будет полностью загружена — так что вы можете безопасно прикреплять события к еще не созданным элементам.

http://api.jquery.com/ready/

Ответ №7:

Вы просите jquery найти ваш clickMe div до того, как он появится. Это находится ниже на странице, и браузер еще не загрузил его. Простое исправление — настроить обработчик кликов во время события document ready:

 <script>
$(document).ready(function() {
    $(".clickMe").click(function() {
       alert('hi!');
       // Do other stuff  
    });
});
</script>