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>
Related
Here is my Javascript which is working initialyy and not working after a postback.
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="cash"){
$(".cash").toggle();
}
if($(this).attr("value")=="cheque"){
$(".cheque").toggle();
}
if($(this).attr("value")=="dd"){
$(".dd").toggle();
}
});
});
</script>
Try like this
$('input[type="checkbox"]').on('click', (function () {
if($(this).attr("value")=="cash"){
$(".cash").toggle();
}
if($(this).attr("value")=="cheque"){
$(".cheque").toggle();
}
if($(this).attr("value")=="dd"){
$(".dd").toggle();
}
});
or you can use change event also
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");
});
I've looked at the other questions on this topic, and know that I have to do something like this:
I've created buttons:
<button id="next"></button>
<button id="prev"></button>
And then at the bottom of the page, I have this (this was taken from the other question here):
<script src="js/impress.js"></script>
<script>impress().init();</script>
<script>
$("#next").click(function () {
api.next();
});
$("#prev").click(function () {
api.prev();
});
</script>
But it isn't working at all; can someone give me a hand with this?
it works, if next-prev are in inside impress div
$('#next').on('click', function(e){
impress().next();
e.stopPropagation();
});
$('#prev').on('click', function(e){
impress().prev();
e.stopPropagation();
});
Replace your script this way:
<script>
$("#next").click(function () {
impress().next();
});
$("#prev").click(function () {
impress().prev();
});
</script>
Have you included jQuery? If not, add this too:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
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>
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");
});