Why is this jQuery click function not working? - javascript

Code:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("#clicker").click(function () {
alert("Hello!");
$(".hide_div").hide();
});
</script>
The above code doesn't work. When I click on #clicker, it doesn't alert and and it doesn't hide. I checked the console and I get no errors. I also checked to see if JQuery was loading and indeed it is. So not sure what the issue is. I also did a document ready function with an alert and that worked so not sure what I am doing wrong. Please help. Thanks!

You are supposed to add the javascript code in a $(document).ready(function() {}); block.
i.e.
$(document).ready(function() {
$("#clicker").click(function () {
alert("Hello!");
$(".hide_div").hide();
});
});
As jQuery documentation states: "A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute"

I found the best solution for this problem by using ON with $(document).
$(document).on('click', '#yourid', function() { alert("hello"); });
for id start with see below:
$(document).on('click', 'div[id^="start"]', function() {
alert ('hello'); });
finally after 1 week I not need to add onclick triger.
I hope this will help many people

Your code may work without document.ready() just be sure that your script is after the #clicker. Checkout this demo: http://jsbin.com/aPAsaZo/1/
The idea in the ready concept. If you sure that your script is the latest thing in your page or it is after the affected element, it will work.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<a href="#" id="clicker" value="Click Me!" >Click Me</a>
<script type="text/javascript">
$("#clicker").click(function () {
alert("Hello!");
$(".hide_div").hide();
});
</script>
</body>
</html>
Notice:
In the jsbin demo replace http with https there in the code, or use this variant Demo

Try adding $(document).ready(function(){ to the beginning of your script, and then });. Also, does the div have the id in it properly, i.e., as an id, not a class, etc.?

You have to wrap your Javascript-Code with $(document).ready(function(){});Look this JSfiddle.
JS Code:
$(document).ready(function() {
$("#clicker").click(function () {
alert("Hello!");
$(".hide_div").hide();
});
});

Be sure there is nothing on your button (such a div or a trasparent img) that keeps from clicking the button.
It sounds stupid, but sometimes we think that jQuery is not working and all that stuffs and the problem is on the positioning of DOM elements.

You can use $(function(){ // code }); which is executed when the document is ready to execute the code inside that block.
$(function(){
$('#clicker').click(function(){
alert('hey');
$('.hide_div').hide();
});
});

Just a quick check, if you are using client-side templating engine such as handlebars, your js will load after document.ready, hence there will be no element to bind the event to, therefore either use onclick handler or use it on the body and check for current target

Proper Browser Reload
Just a quick check as well if you keep your js files separately: make sure to reload your resources properly. Browsers will usually cache files, so just assure that i.e. a former typo is corrected in your loaded resources.
See this answer for permanent cache disabling in Chrome/Chromium. Otherwise you can generally force a full reload with Ctrl+F5 or Shift+F5 as mentioned in this answer.

Related

jQuery preventDefault() issue

My problem is that there is no way to make preventDefault() work.
Here is my code:
HTML:
<a class="list-ui-controlcol-link list-ui-controlcol-link-delete" href="http://localhost/lmvc_trunk/pages/delete/17">Törlés</a>
JQUERY:
$(".list-ui-controlcol-link-delete").click(function(event){
event.preventDefault();
});
Even if I copy-paste the original example from jQuery's own site (http://api.jquery.com/event.preventdefault/) it is not working.
Could you explain me why this happening and how to make preventDefault work correctly?
You need to make sure that your script is executed after the DOM is loaded:
$(document).ready(function() {
$(".list-ui-controlcol-link-delete").click(function(event){
event.preventDefault();
});
});
See this page for more details: http://api.jquery.com/ready/
Where do you include your script? If you include the script in HEAD when the script loads there's no a.list-ui-controlcol-link-delete is present in the DOM.
Try doing this:
<html>
<head>
<title>test</title>
</head>
<body>
Torles
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Where app.js contains:
$('.list-ui-controlcol-link-delete').click(function(e) { e.preventDefault(); });
Although I'd recommend using the .on() function as it will dinamically bind the events on newly generated DOM elements:
$(document).on('click','.list-ui-controlcol-link-delete',function(e) { e.preventDefault(); });

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

Add a class to first div using jQuery

How to add a class to first div using jQuery.
I Tried following code but doesn't work for me.
maybe I'm missing something.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script>
$('.item')
.eq(0).addClass('first').end()
.eq(-1).addClass('last').end();
</script>
<style type="text/css">
.first, .last{
background-color:#0099FF;
}
</style>
</head>
<body>
<div class="item">aaa</div>
<div class="item">bbb</div>
<div class="item">ccc</div>
<div class="item">ddd</div>
<div class="item">eee</div>
</body>
</html>
Edit: Thanks to everyone, is there anyway to add a class to rest of DIVs?
You are executing the code before the markup is ready. Wrap the code in
// document ready short-style
$(function() {
});
try
$(document).ready(function() {
$('.item:first-child').addClass('first');
});
Your code is correct, but it's executed before the DOM is ready, please move the <script></script> to the last line before </body>.
To add a class to the rest of the elements you can do this (from VisioN's comment)
$(".item:not(:first,:last)").addClass("differentClass");
$(".item :first").addClass('first');
u use this code
$(function(){
$(".item:first-child").addClass("anyclass");
})
or
$("div:first-child").addClass("anyclass");
your code should execute when the DOM is fully loaded. So use $(document).ready().
the script can be run as soon as the DOM hierarchy has been fully
constructed. The handler passed to .ready() is guaranteed to be
executed after the DOM is ready, so this is usually the best place to
attach all other event handlers and run other jQuery code.
Read more about $(document).ready().
check the code below. It will help you to get done what you want.
$(document).ready(function() {
$('.item').first().addClass('first');
});
Otherwise your js is ran even before the DOM is loaded
$(".item:first").addClass('first'); will work fine too.
Try the demo too.
Hope this will help you out. If you have any questions please don't hesitate to ask. Thanks
Here is the jQuery code
<script>
$(document).ready(function(){
$('body .item:first').addClass('YOUR CLASS VALUE');
});
<script>
Regards,
http://www.santoshkori.com
see jsfiddle here
$(document).ready(function() {
$('div:first').addClass('first');
});
You could always use straight CSS, although it is CSS3. E.g. you could replace your curre t CSS with:
.item:nth-of-type(1), .item:nth-of-type(3)
{
background-color:#0099FF;
}
If you do just want jQuery then you could try:
$('.item:first').addClass('first');
$('.item:last').addClass('last');
Try this
JS CODE
$(document).ready(function(){
$('div.item')
.eq(0).addClass('first').end()
.eq(-1).addClass('last').end();
});
DEMO
Note
you need to use $(function() { ... }) to wrap whole jQuery code.

Background-color not changing by jQuery

I have jQuery on my webpage.
I am changing background color of a div.
Its not working.
<script type="text/javascript">
$("#gridbox").css({'background-color':'black'});​
</script>
Your code should work, try using document ready handler.
$(document).ready(function(){
$("#gridbox").css({'background-color':'black'});​
})
http://jsfiddle.net/WcQse/
Its possible your script is running before the DOM has loaded. Try:
<script type="text/javascript">
$(document).ready(function(){
$("#gridbox").css({'background-color':'black'});​
});
</script>
-- Demo --
Try this
If you are using ASP.NET then your Client ID might change depending on the use of Master Pages in that case you can try something like this.
$('#<%= gridbox.ClientID %>' ).css('background-color','black');​
If it is just a div then you should wrap it in document.ready() method
$(document).ready(function(){
$('#gridbox').css('background-color','black');
});
Demo
The same code that you are using is working fine for me
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="gridbox" style="background-color:red;">gridbox</div>
<script type="text/javascript">
$("#gridbox").css({'background-color':'black'});
</script>
</body>
</html>
so you should first include the jquery library, then put the javascript file after the div that you want to change the background color.
Try:
$("#gridbox").css("background-color", "black");
Edit:
Add a document ready function, this will execute the css change after the DOM has loaded.
$(document).ready(function() {
$("#gridbox").css("background-color", "black");
});
Note: Ensure you have the jQuery JavaScript file referenced in the page.

Why doesn't the following jquery script work?

I have a simple single page setup. Under a root folder, I have 3 subfolders (js, css, and images). In the root folder, I have an index.html page with the following content:
<html>
<head>
<title></title>
<script language="javascript" src="js/jquery-1.3.2.min.js"></script>
<script language="javascript" src="js/myscript.js"></script>
</head>
<body>
<a onclick="doSomething()" href="#" class="doSomething">Click!</a>
</body>
<html>
myscript.js contains the following code:
$('a.doSomething').click(function(){
//Do Something here!
alert('You did sometihng, woo hoo!');
});
When I click the link, nothing happens. What am I missing?
Wrap document.ready around the code:
$(document).ready(function() {
$('a.doSomething').click(function(){
//Do Something here!
alert('You did sometihng, woo hoo!');
return false; // return false to prevent default action
});
});
As it is right now, you are trying to bind an event to an element that does not yet exist in the DOM.
Also, not sure why you have the onclick on the link itself, as the whole point of jQuery is to be able to take those ugly inline events out of there and bind them cleanly in the javascript. If you do this:
yay click me
And then use the code above, it should work fine.
At first I thought you were just missing a function named "doSomething". Then I realized you where expecting your selector to find the anchor tag anyway. However, that won't happen. At the time your script runs, the anchor hasn't been added to the DOM yet.

Categories

Resources