jQuery class selector and click() - javascript

I'm currently trying to get an alert to happen when something is clicked. I can get it working in jsFiddle, but not in production code:
jsFiddle example that works (jQuery 1.5 loaded)
HTML (in case jsFiddle is inaccessible):
<!DOCTYPE HTML><html><head><title>Test</title></head>
<body> <h1>25 Feb 2011</h1><h3>ABC</h3><ul>
<li class="todoitem">Test—5 minutes</li> </ul>
</body></html>
Javascript:
$(".todoitem").click(function() {
alert('Item selected');
});
Non-working production example:
<!DOCTYPE HTML><html><head><title>Test</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".todoitem").click(function() {
alert('Item selected');
});
</script>
</head>
<body>
<h1>25 Feb 2011</h1><h3>ABC</h3><ul><li class="todoitem">Test—5 minutes</li></ul>
</body>
</html>
Safari's Inspector indicate that jQuery is being loaded correctly, so that's not the issue. As far as I can tell, these two pieces of code are essentially identical, but the latter isn't working. Can anyone see what I've done wrong?

You need to wrap your code in $(document).ready()
This will work
$(document).ready(function(){
$(".todoitem").click(function() {
alert('Item selected');
});
});
JSfiddle does this for you automatically

Wrap the code inside
$(function (){
})
And you have the working code
$(function (){
$(".todoitem").click(function() {
alert('Item selected');
});
})

Related

How to add a class when the document is started loading and remove class when the document is finished loading

I want to remove class "active" from the body when all components will be loaded.For this purpose, I wrote following jquery code snippets and it's working perfectly in Chrome, but in Firefox the "active" class is not removed by the removeClass function after loading all components.
$(document).ready(function($){
$("body").addClass("active");
});
$(window).on('load', function () {
$("body").removeClass("active");
});
Is there anything else that could be causing the issue..?
I tried this in Chrome and Firefox and it works fine....doc loads first...Maybe try running this code below to see if this does the same thing on your firefox...?
But it could be FF version or maybe jQuery version too.
I have FF 56.0 (32-bit) it's updating as we speak :-P
and jQuery 2.2.4
<!doctype html>
<html>
<head>
<title>Quick Loading test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<h1>testing</h1>
<img src="http://www.guoguiyan.com/data/out/113/69175307-large-wallpapers.jpeg">
<script>
$(window).on('load', function() {
$('body').removeClass('active');
console.log('window load');
});
$(document).ready(function($) {
$('body').addClass('active');
console.log('doc ready');
});
</script>
</body>
</html>
I found this link regarding this...
https://github.com/jquery/jquery/issues/3194
So maybe try
$(window).on('load', function() {
$('body').removeClass('active');
console.log('window load');
});
$(function() {
$('body').addClass('active');
console.log('doc ready');
});

Stop gif on mover hover does not work

I want to show a GIF first and when the mouse hovers on the GIF it should show a different JPG picture – so that it looks like it stopped.
I tried this code but it didn't work.
I would like to know which part needs to be fixed.
<html>
<script>
$(document).ready(function()
{
$("#imgDino").hover(
function()
{
$(this).attr("src",
"http://s2.favim.com/610/150619/airplane-fly-landscape-plane-Favim.com-2831842.jpg");
},
function()
{
$(this).attr("src", "https://66.media.tumblr.com/233306b207ff895cc591ee86684fd792/tumblr_mze5yi7uwQ1sqqsygo1_400.gif");
}
);
});
</script>
<body>
<img id="imgDino" src="https://66.media.tumblr.com/233306b207ff895cc591ee86684fd792/tumblr_mze5yi7uwQ1sqqsygo1_400.gif" />
</body>
</html>
There are two problems here with your code:
You are not loading jQuery - so you can't use it. And the console (F12) throws an error for that: Uncaught ReferenceError: $ is not defined
You are registering the javascript-event before the dom-element is available
So a working solution for your scenario would be:
<html>
<head>
</head>
<body>
<img id="imgDino" src="https://66.media.tumblr.com/233306b207ff895cc591ee86684fd792/tumblr_mze5yi7uwQ1sqqsygo1_400.gif" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#imgDino").hover(
function() {
$(this).attr("src",
"http://s2.favim.com/610/150619/airplane-fly-landscape-plane-Favim.com-2831842.jpg");
},
function() {
$(this).attr("src", "https://66.media.tumblr.com/233306b207ff895cc591ee86684fd792/tumblr_mze5yi7uwQ1sqqsygo1_400.gif");
}
);
});
</script>
</body>
</html>
You script is using syntax from JQuery, add the following between your <head></head> tags:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
The code will work as expected after you do this (though the effect looks kinda weird with the images used by the script).
Also, as this question is related to JQuery, you should add that tag to your question.

JQuery On Button Click Alert Issue

JSFiddle demo: https://jsfiddle.net/cr33q8v7/
$("#findMyWeather").click(function() {
alert("button clicked");
});
All I'm trying to verify is if the JQuery is working and I'm not getting any pop-up that says button clicked, so it would appear the syntax is wrong, but I've checked it multiple times and it looks right.
So if I include the library on JSFiddle, then why does the below code in the HTML file not run, as it appears the function is identical and these pointers both direct to the library:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$("#findMyWeather").click(function() {
alert("button clicked");
});
</script>
So the // pointers didn't reference (this is what the teacher instructed). When I changed to `https:``, then it functioned correctly:
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
I need another set of eyes, or else I'm missing something else and just don't see it.
You need to include the jQuery library in JSFiddle.
Click the gear that says Javascript and choose the version of jQuery that suits you.
Your fiddle doesn't actually include jQuery via a script tag.
e.g. add: <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> to your HMTL
you must add below line after last div between body tag :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4
/jquery.min.js"></script>
Here is Demo
Add the cdn link for Jquery. Without jquery it will not work. You can add it to the before end of body tag.
Add:<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
use jquery online by adding <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>.
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<button id="check">Click on me to check if jquery is working ....!</button>
</body>
<script type="text/javascript">
$("#check").click(function(){
alert("yep, jquery is working");
});
</script>
</html>
every thing looks fine please select jquery in fiddle then try it
and please add this script code in your file
< script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script>

Div won't fade out/fade in

I am trying to get a div to fade out and in on button click. It works on jfiddle but for some reason it is not working on my asp.net page:
$('#btn').click(function(e){
$('#fancy').fadeOut('slow', function(){
$('#fancy').fadeIn('slow');
});
});
<div>fade div</div>
<div id="fancy">Fancy Div</div>
http://jsfiddle.net/3XwZv/1859/
my asp.net page:
<html>
<head>
<script type="text/javascript" src="../javascript/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../javascript/jquery-ui.js"></script>
<script type="text/javascript" class="init">
$('#btn').click(function (e) {
$('#fancy').fadeOut('slow', function () {
$('#fancy').fadeIn('slow');
});
});
</script>
</head>
<body>
<div>Fade div</div>
<div id="fancy">Fancy Div</div>
</body>
</html>
If you put your jQuery code inside the head section and try to manipulate the DOM elements it won't work as at that time your HTML document isn't loaded yet. So you have two ways to resolve this issue.
First : Use $(document).ready() function and put your code inside it. So whenever your document is ready, $(document).ready() event will be fired.
$(document).ready(function () {
$('#btn').click(function (e) {
$('#fancy').fadeOut('slow', function () {
$('#fancy').fadeIn('slow');
});
});
});
Second : Put your jQuery code at bottom of your page.
Can you share the page you have this implemented on? Hard to know what's going wrong without seeing the failing code. My first guess would be that jQuery isn't running on your page.
In the meantime, you could try throwing a log inside of your click function to see if that's firing.
$('#btn').click(function(e){
console.log('Click fired');
$('#fancy').fadeOut('slow', function(){
$('#fancy').fadeIn('slow');
});
});
Looks like you may have not done the binding:
try this code
$(function(){
$('#btn').click(function(e){
console.log('Click fired');
$('#fancy').fadeOut('slow', function(){
$('#fancy').fadeIn('slow');
});
});
}

jQuery just not working

For some reason my jQuery script just doesn't want to work, and it's really really simple, I've taken everything away except the actual jquery script, it's really annoying please help.
Thank you!
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$("#click").click(function () {
alert("works!");
});
</script>
</head>
<body>
Button
</body>
</html>
P.S. jQuery JS file is valid.
Change your code to this. It ensures that the JavaScript is executed once all your HTML elements have been loaded to the page:
$(document).ready(function () {
$("#click").click(function() {
alert("works!");
});
});
However, you should move your script tags to the bottom of the page, to ensure that they do not block. This will also mean you don't actually need the $(document).ready callback.
You need to wrap your code within
$(function(){
// your code here which relies on DOM elements
});
Otherwise you DOM has not been loaded and events will not be bound to elements.
Wrap your functions into the $(document).ready()
$(document).ready(function(){
$("#click").click(function() {
alert("works!");
});
});
Add your code inside document.ready like this
$(document).ready(function () {
$("#click").click(function () {
alert("works!");
});
});
or add your code at the end of the document like this
<body>
Button
// Other elements...
<script type="text/javascript">
$("#click").click(function () {
alert("works!");
});
</script>
</body>
$(document).ready(function(e) {
//TO DO your code goes here
});
Just change your script tag to the "/body" tag.
That will let the browser create the DOM and read script's one by one!
Cheers!
Try this:
$("#click").live("click",function() {
alert("works!");
});

Categories

Resources