JQuery.Click () not working
I have an external *.js
file that contains the following code:
$(".hlavni_tema").click(function() {
alert("ok");
});
alert("loaded");
and the HTML page:
<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>
In the HEAD section, I include both jQuery and external file sources like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/_jscripts/tema.js"></script>
When I open the webpage, it alert()
notifies "loaded"
to import the jQuery file. But when I click on the span element whose class is "hlavni_tema" nothing happens. I have also tried this code:
.on("click", function())
and
.on("click", "#tema", function())
- all to no avail.
Thanks for any help.
source to share
I have tested the same code in Firefox, Google Chrome and Internet Explorer. And it works in all three browsers, maybe you are adding click events in front of the jquery files.
Please check if you put the click code in the document.ready () function.
<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>
source to share
One of the most important things to know about jQuery is to know when the DOM is fully loaded so that a single jQuery script can be executed. A good recommendation is as follows:
$(document).ready(function() {
// your code
});
Or you can use a shorthand form with an anonymous function like below:
$(function() {
// your code
});
See here for details .
Note. ".ready ()" refers to when the DOM is fully loaded and the anonymous function is the handler for this event; see here .
Also, using the correct jQuery source url makes a difference if you are not loading the library locally. To run the code on StackOverflow I had to use
https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
even tho 'I could find the same url as before instead of "http".
Note:
The ready event fires after the HTML document has loaded, while the onload event fires later when all content (like images) has also been loaded.
See discussion .
Since you might want to check if the window has been fully loaded, this script includes this code as well.
$( 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>
Note: This code allows you to add CSS for demonstration purposes. Also, a good way to test is to replace the alert () statements with the .log () console - it goes ahead and saves one because it doesn't need anything.
source to share