JQuery .Нажмите() не работает

Question

У меня есть внешний *.js файл, который содержит следующий код:

$(".hlavni_tema").click(function() { 
    alert("ok"); 
}); 
alert("loaded"); 

и страницу HTML, следующим образом:

<div id="tema"> 
<span id="hlavni_tema_1" class="hlavni_tema">Základní fyzikální pojmy a jednotky</span> 
<input type="checkbox" name="tema" id="tema_1a" value="'1a'"> 
<label for="tema_1a">Základní fyzikální pojmy, měření ve fyzice</label> 
... 
<span id="hlavni_tema_8" class="hlavni_tema">Astrofyzika</span> 
<input type="checkbox" name="tema" id="tema_8d" value="'8d'"> 
<label for="tema_8d" class="posledni_label">Fyzikální obraz světa</label> 
</div> 

В разделе ГОЛОВЫ я включаю как JQuery и внешние источники файлов следующим образом:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="/_jscripts/tema.js"></script> 

Когда я открыть веб-страницу, alert() уведомляет "loaded", чтобы импортировать файл jQuery. Но когда я нажимаю элемент span, класс которого «hlavni_tema», ничего не происходит. Я пробовал также с этим кодом:

.on("click", function())

и

.on("click", "#tema", function())

- все безрезультатно.

Спасибо за любую помощь.

Answer 1

Вы должны назначить обработчики событий после загрузки DOM.

Попробуйте это, он должен работать.

$(document).ready(function(){ 
    $(".hlavni_tema").click(function() { 
     alert("ok"); 
    }); 
    alert("Document loaded"); 
}); 
alert("Script loaded"); 

Answer 2

Поместите код внутри $(document).ready()

$(document).ready(function() { 
    $(".hlavni_tema").click(function() { 
     alert("ok"); 
    }); 
}; 

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

Answer 3

Возможно, Dom не готов при настройке события. Поместите обработчик в готовый документ

$(function(){ 
    $(".hlavni_tema").click(function() { 
    alert("ok"); 
    }); 
}); 

Answer 4

Я проверил тот же код в Firefox, Google Chrome и Internet Explorer. И он работает во всех трех браузерах, возможно, вы добавляете события щелчка перед файлами JQuery.

Проверьте, не поместили ли вы код клика в функции document.ready().

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">/script> 
<script src="/_jscripts/tema.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".hlavni_tema").click(function() { 
      alert("ok"); 
     }); 
     alert("loaded"); 
    }); 
</script> 

Answer 5

Одним из самых важных вещей, чтобы знать о JQuery является то, что нужно, чтобы быть осведомленным о том, когда DOM полностью загружен так, что один в скрипт JQuery может выполнить. Хорошая рекомендация заключается в коде следующим образом:

$(document).ready(function() { // your code });

Или, вы можете использовать сокращенную форму с анонимной функции следующим образом:

$(function() { 
    // your code 
}); 

Смотрите here для получения дополнительной информации.

Замечание: «.ready()» относится к тому, когда DOM полностью загружен, а анонимная функция является обработчиком этого события; см. here.

Кроме того, использование правильного URL-кода исходного кода jQuery имеет значение, если вы не загружаете библиотеку локально. Чтобы запустить код на StackOverflow, я должен был использовать

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js 

даже Тхо»Я мог бы найти тот же адрес в Интернете префиксом„HTTP“вместо этого.

Примечание:

Готовое событие происходит после того, как был загружен HTML-документ, в то время как происходит событие OnLoad позже, когда все содержимое (например, изображения) также был загружен.

См. Это discussion.

Поскольку, возможно, вы захотите проверить, было ли полностью загружено окно, этот скрипт также содержит этот код.

$(document).ready(function() { 
 
    $('.hlavni_tema').click(function() { 
 
    console.log("ok"); 
 
    }); 
 
    console.log("document loaded"); 
 
}); 
 
    $(window).on("load", function() { 
 
    console.log("window loaded"); 
 
});

#tema { 
 
background:#eef; 
 
} 
 

 
.hlavni_tema { 
 
    color:#00c; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!--script src="/_jscripts/tema.js">Commented out to work with SO functionality</script--> 
 

 
<div id="tema"> 
 
    <span id="hlavni_tema_1" class="hlavni_tema">Základní fyzikální pojmy a jednotky</span> 
 
    <input type="checkbox" name="tema" id="tema_1a" value="'1a'"> 
 
    <label for="tema_1a">Základní fyzikální pojmy, měření ve fyzice</label> ... 
 
    <span id="hlavni_tema_8" class="hlavni_tema">Astrofyzika</span> 
 
    <input type="checkbox" name="tema" id="tema_8d" value="'8d'"> 
 
    <label for="tema_8d" class="posledni_label">Fyzikální obraz světa</label> 
 
</div>

Примечание: этот код берет на себя смелость добавить некоторые CSS-код для демонстрационных целей. Кроме того, хороший способ проверить - заменить операторы alert() на console.log() - он более аккуратный и избавляет от необходимости отклонять что-либо.