I'm relatively new to JQuery and would like to try something. I just followed a simple tutorial to start up with on http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
So I specified my script in the :
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
</script>
and included a test link in the :
Link
however, when I refresh thet document my browser keeps saying
TypeError: Property '$' of object [object Window] is not a function
which I can understand for "normal" JavaScript but I believe this kind of function is new in JQuery. Can someone assist mer here, please?
links:http://wittmerperformance.com/site/
Did you embed the jquery library?
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
Further more I think that currently "on" is state-of-the-art as in:
$(document).ready(function() {
$("a").on('click', function() {
alert("Hello world!");
});
});
try this:
jQuery(document).ready(function($) {
$("a").click(function() {
alert("Hello world!");
});
});
The reason for the issue that you are facing could be that you haven't included JQuery library or it may be due to conflict, give it a try using
jQuery(document).ready(function ($) {
$("a").on('click', function() {
alert("Hello world!");
});
});
<script type="text/javascript">
$(document).ready(
function() {
$("a").click(
function(){
alert("Hello world!");
});
});
</script>
this is a working example.simpler. in your example you fotgot to close a function you started. count ( { } ) ; you are missing }) at the end. it shold work fine yours too.
full working example below:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$("a").click(
function(abc){
alert("Hello world!");
abc.preventDefault();
return false;
});
});
</script>
</head>
<body>
<a>some link</a>
</body>
</html>
Related
I use codes with blink;
Jquery;
<script type="text/javascript">
var blink = function(){
$('#blinker').toggle();
};
$(document).ready(function() {
setInterval(blink, 100);
});
</script>
Page;
[full_column align="center"][su_button url="#basvuru" class="fancybox" background="#b21f30" size="6"] <div id="blinker">ÜCRETSİZ PROGRAMA BAŞVUR</div>[/su_button][/full_column]
Website: www.varsiteam.com
Try with :
<script type="text/javascript">
$(document).ready(function() {
var blink = function(){
$('#blinker').toggle();
};
setInterval(blink, 100);
});
</script>
If you look at console you will see this error:
Uncaught TypeError: undefined is not a function
To fix that you have to put your function inside of $(document).ready event. When you call $('#blinker').toggle(); it tries to use jQuery object which is undefined if you not put it in $(document).ready event. That is how jQuery works.
When you're working in WordPress, jQuery is loaded in a no-conflict mode.
So, you'll need to use jQuery and not $.
Your code should be:
var blink = function(){
jQuery('#blinker').toggle();
};
Or if you want to wrap everything in your document ready event:
jQuery(document).ready(function($) {
var blink = function(){
$('#blinker').toggle();
};
setInterval(blink, 100);
});
The JQuery event on click is not firing with the following code:
core.js
$(document).ready(function() {
$('.login-form-input').on('click', function(){
alert("s");
$('#login-description').css({color: #000;}).fadeIn(1000);
alert("s");
});
}
index.php
http://pastebin.com/khHZS3HN
You've got this in your page...
<script type="text/javascript" src="js/core.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
That includes your script, core.js, before it includes jQuery. Your script requires jQuery so it should be the other way round...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/core.js"></script>
Also, as pointed out by reyaner in the question comments, you need quotes around the colour...
$('#login-description').css({ color: "#000" }).fadeIn(1000);
This should work for you :
jQuery should be added before the click function and all codes.
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js"></script>
$(document).on("click", ".login-form-input ", function(e){
alert("s");
$('#login-description').css({color: "#000"}).fadeIn(1000);
alert("s");
});
This line is wrong:
$('#login-description').css({color: #000;}).fadeIn(1000);
It should be (-> {color: "#000"}):
$('#login-description').css({color: "#000"}).fadeIn(1000);
$('.login-form-input').click(function () {
alert("s");
$('#login-description').css({color: #000;}).fadeIn(1000);
alert("s");
});
Trying to learn JQuery here, im starting off really simple.
When I click the button, the page reloads and nothing happens.
Heres my JS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$("#submitShout").click(function() {
alert('hi');
});
</script>
Here's my html:
<div class="panel right">
<form name="shout" >
<textarea name="text" id="text" class="ribbitText"></textarea>
<input type="submit" id="submitShout" value="Ribbit!">
</form>
</div>
i think you forgot document.ready..
$(function () { //<--- here..the codes below is called whn document is ready
$("#submitShout").click(function () {
alert('hi');
});
});
Make sure you include jQuery reference and you code surrounded with
$(function(){
});
as
$(function () {
$("#submitShout").click(function () {
alert('hi');
});
});
or click binded at the end of the document
Just try this,
$("#submitShout").on("click", function() {
alert('hi');
});
If it is lower version Jquery, try this.
$("#submitShout").live("click", function() {
alert('hi');
});
jQuery 1.9 version
$(function(){
$("#submitShout").on('click',function(){
//your code
});
});
jQuery version lower than 1.9
$(function(){
$("#submitShout").live('click',function(){
//your code
});
});
that's a really old jquery version, upgrade it to something newer:
https://developers.google.com/speed/libraries/devguide#jquery
I guess Either you are missing the doc ready handler or the jQuery lib:
first try with this:
$(function(){
$("#submitShout").click(function() {
alert('hi');
});
});
then this one:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$("#submitShout").click(function() {
alert('hi');
});
});
</script>
make sure jQuery is loaded
use the latest jQuery library
check the error console (using chrome developer tools or firebug for firefox
try changing your jQuery to
code:
$(function(){
$("#submitShout").click(function(e) {
e.preventDefault();
alert('hi');
return false;
});
});
Try this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#submitShout").click(function(event) {
alert('hi');
event.preventDefault();
});
});
</script>
The code
<script type="text/javascript" src="jquery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("Hello!");
});
$(".demo").click(function() {
alert("I am demo");
});
</script>
<body>
<button class="demo">click me</button>
</body>
The first Hello! is OK, but I am demo can't?What's the matter?
the similar question
jquery each selector doesnt work
Your click event handler is trying to bind to the demo button before the HTML body has rendered. You need to assign the event handler inside your $(document).ready function:
Change this:
$(document).ready(function() {
alert("Hello!");
});
$(".demo").click(function() {
alert("I am demo");
});
To this:
$(document).ready(function() {
alert("Hello!");
$(".demo").click(function() {
alert("I am demo");
});
});
Bind the click event inside ready()
$(document).ready(function() {
alert("Hello!");
$(".demo").click(function() {
alert("I am demo");
});
});
see this demo
$(".demo").live('click',function() {
alert("I am demo");
});
I want to get scroll even and write this:
<script type="text/javascript">
$(function () {
$(window).scroll(function () {
alert($("body").scrollTop());
});
});
</script>
but when I run the page and scrolls, the page makes it black, it doesn't work correctlly.
Can anyone please help me, why it is not working???
Your code works fine. Have you included the jquery script in your code ?
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function (){
$(window).scroll(function () {
alert($("body").scrollTop());
});
});
</script>
I wrote a function that works then when I do scroll, and everything works fine. But if I do try debug in the browser, it same stops and shows the black screen.
$(window).scroll(function () {
setBackground();
});
function setBackground() {
// do something ...
}