why are variables declared outside a function null? - javascript

i made this using mootools:
$("fox").addEvent("click", function(){
alert("clicked");
});
and the html:
<p id="fox">A</p>
now if i try it here http://jsfiddle.net/5uJ54/3/ , it works but if i try it in a browser and thats all the code it doesnt, i get this in firebug:
$("fox") is null
and it doesnt work in chrome either.
why is this happening? i have also tried putting everything inside a function but it still doesnt work.

If you try to select your element before the document is ready then you will get null.
The JSFiddle sandbox you have is setup to run after the document has been loaded.
To get the code to work in your document you can listen for this MooTools event which will be triggered after the document is ready:
http://mootools.net/docs/core/Utilities/DOMReady
Your example would end up looking something like this:
window.addEvent('domready', function() {
$("fox").addEvent("click", function(){
alert("clicked");
});
});

Are you sure mootools is being loaded and you are putting the javascript within some sort of domready event? (Not sure what mootools's version of it is).

Because you didn't include the mootools javascript library anywhere?

Related

How to trigger "ready" only once in JQuery?

My way like below does not work. Is there other way to trigger ready event only once? Thanks
$("#id").one("ready", function (){
// do somthing
});
I really recommend you read the jQuery documentation because I'm sure that you will find other way to solve your issue. document ready is not for this purpose.
http://learn.jquery.com/using-jquery-core/document-ready/
I will summarize those concepts:
The js file must have just one $( document ).ready() function, because this function is only for make sure that the code inside it will only run after the "document is ready" (Document Object Model (DOM) is ready for JavaScript code to execute - jQuery documentation). It means that, once all of the HTML as loaded, then your js wil run.
Ok, after know that you can write your focus function inside the document ready to make sure it will work correctly.
See this example that I did: https://jsfiddle.net/hf60asgo/1/
We have the HTML (DOM):
<input id="inputTest" placeholder="Test"/>
<span id="spanTest">Write something</span>
And the JavaScript (jQuery):
$(document).ready(function(){
$("#inputTest").focus(function() {
$("#spanTest").fadeOut(1000);
});
});
After the document is ready (the input and the span was loaded) the jQuery code will run, but only if you focus (click) in the input.
I hope I could give some light to you.
If you want to do something with #id when the document is ready, here is what you have to do:
$(function() {
// do something
$('#id').css('background', 'red);
// do other things
});
There should be only one ready function in your code and it should brace all you jQuery code.
As said above, read the documentation, you won't lose your time.

.click() doesn't work with (document).ready()

My jQuery('a[data-filter=".hottop"]').click(); doesn't work together with my document.ready function. The click works fine when fired from console, and document.ready fires everything else just fine. It just doesn't trigger the click.
Can someone figure out why?
Live Page. Site isn't public yet, so please identify with stackof//123O
For some reason I can't explain why it is happening, I used to experience the same thing and I'm creating DOM elements dynamically. Could you try this
$("body").on('click', 'yourClass/ID-Element', function () {
//your codes
});
Using the following function made everything work:
$(window).load(function()
Thanks!

Why does $(this) works with .hover() but not with .ready()?

So, I am trying to get backstretch.js to work with multiple divs that is loaded from the db.
but I can't get a separate image for each div.
This works perfectly, when I hover the boxes, the background shows up, but I wan't it to be loaded as soon as the page loads.
$(".tournament-thumb").hover(
function(){
$(this).backstretch($(this).data("url"));
}
);
I have tried this with .ready() without any result this it doesn't seem to register "$(this)" ? :
$(".tournament-thumb").ready(
function(){
$(this).backstretch($(this).data("url"));
}
);
Here is the HTML:
<div class="tournament-thumb" data-url="images/image.jpg"></div>
Please help me... If there is any better way than this, please respond with that then :)
From the docs:
The .ready() method can only be called on a jQuery object matching the current document, so the selector can be omitted
So you can only use $(document) for the ready() method.
possibly best solution is to bind the delegation to the document object like
$(document).on('hover','.tournament-thumb',function(){
$(this).backstretch($(this).data("url"));
});
Okay, I solved it with jQuery.each
$.each($(".tournament-thumb"), function() {
$(this).backstretch($(this).data("url"));
});

Event handlers not working correctly in jsfiddle

Trying to make a jsfiddle so I can post it on here and get some help with a problem; however, I'm having a problem getting jsfiddle to act as expected, so I'm having a problem trying to document my problem!
http://jsfiddle.net/eidsonator/he4Vc/#base
I'm trying to add a blur event handler to a input with id of "part". My alert fires as soon as the page loads (which it shouldn't) and doesn't fire when focus is lost. This behavior persists in chrome and in firefox (I'm coding for an internal web app, so I can ignore ie!)
$("#part").on('blur', alert('lost focus'));
I've changed the load method, and tried wrapping it in my own $(document).ready(function() {}); as well as using .blur() and different versions of javacript... any clues?
Thanks!
You are calling alert straight away, and passing the return value of it to the .on() method. Instead, you need to pass a reference to a function that can be invoked when the event is received:
$("#part").on('blur', function () {
alert('lost focus')
});
Here's an updated fiddle.
you have written a wrong syntax .see the docs for more info,and change your code to
$("#part").on('blur', function(){
//do something
});

Copy DIV content to another DIV

How do i copy the contents of DIV1 to DIV2 on load of the page using jquery? I've tried
$('.buffer').html($("#beskeder_vis").html());
However i wasn't able to make it work out
Assuming your selectors are correct, you should put your code in the .ready() Event.
http://api.jquery.com/ready/
So something like:
jQuery(document).ready(function() {
jQuery('.buffer').html(jQuery("#beskeder_vis").html());
}
Otherwise jQuery won't be able to find your elements, since the DOM isn't loaded, when your function is executed.
You should bind event handler on ready event. See documentation: ready funciton
$(document).ready(function () {
$('.buffer').html($("#beskeder_vis").html());
});
$('#two').html($('#one').html());
See this live example
It works for me. It may have something to do with the jquery version your using
Proof jsfiddle

Categories