JQuery event .on('click' not firing - javascript

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");
});

Related

jQuery .tap event not working

I can't figure out why the jQuery tap event isn't even getting a respond when I test it. I put in an alert and I haven't gotten it to pop up at all. My code looks like this:
var calendarOpen = false;
$('.calendar').on("tap", function () {
alert('1');
if (calendarOpen == false) {
$('.login-body').animate({left: '90%'}, 300);
$('.calendar-body').animate({right: '10%'}, 300);
calendarOpen = true;
} else {
$('.login-body').animate({left: '0px'}, 300);
$('.calendar-body').animate({right: '50%'}, 300);
calendarOpen = false;
}
});
I have the script and css pages attached and I've checked for any typos. I copied the jQuery documentation and I'm still having problems. Thanks for the help.
These are my included scripts and the code provided above is under main.js.
<script src=http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js></script>
<script src=http://code.jquery.com/ui/1.10.3/jquery-ui.js></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="scripts/main.js"></script>
You need to load your JS files in this order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
reference: http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html

Jquery .click not firing

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>

simple JQuery example is causing me troubles for unknown reason

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>

Jquery selector doesn't work

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");
});​

2 scripts on the same page breaks

i have a custom jquery for my site aswell as an lightbox query. But it seems i cannot get both to work the the same time. Its always 1 of them working, depending on the order they come in. heres the code
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function () {
$('a[#rel*=lightbox]').lightBox({
maxHeight: screen.height * 0.6,
maxWidth: screen.width * 0.6
});
});
</script>
<script type="text/javascript" src="./Scripts/jquery-1.3.2.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
/* Menu */
$("#menu li:last").css("margin-right", "0");
$("#menu ul.sub li:last").css("margin-right", "0");
$("#menu li#menues a").hover(function() {
$(this).siblings(".sub").fadeIn(200);
});
$("#menu").hover(function() { }, function() {
$(".sub").fadeOut(200);
});
});
</script>
You have included the jQuery twice ..
Remove this line of code
<script type="text/javascript" src="./Scripts/jquery-1.3.2.js" ></script>
Your line:
$("#menu li#menues a").hover(function() {
$(this).siblings(".sub").fadeIn(200);
});
Uses the single parameter call for hover() http://api.jquery.com/hover/#hover2
This was added in jQuery 1.4, and you are using 1.3.2.
Either:
Update your jQuery.
Or use the two parameter function:
$("#menu li#menues a").hover(function() {
$(this).siblings(".sub").fadeIn(200);
}, null);
That way the anonymous function will be called only on mouseenter, change the order of the params if you want it called on mouseleave.
If you want it to fade in/out:
$("#menu li#menues a").hover(
function() {
$(this).siblings(".sub").fadeIn(200);
},
function() {
$(this).siblings(".sub").fadeOut(200);
});
If you need to use the same function for both, while using jQuery 1.3.2 use:
function menuLinkHover(){
$(this).siblings(".sub").fadeIn(200);
}
$("#menu li#menues a").hover(menuLinkHover, menuLinkHover);
Enjoy!
Some scripts extend the jQuery object, it appears Lightbox is one of them.
By including a reference to the jQuery script twice, as the page loads:
the jQuery object will be added to the DOM,
then extended for lightbox,
then a new jQuery object will be added to the DOM without the extensions
so the script that depends on lightbox will not run.
Removing the second jQuery script tag should fix this.

Categories