We Keep Coding

How to disable anchor element on load using jquery?

In my project , there is one anchor element as follows.
TRY NOW
I just want to disable the above anchor element when page completely loads. Actully I have used removeattr property of jquery. But I only want to disable the anchor element without removing onClick() event. So please help me in this question.

You say you'd like to keep your existing attribute handler. I suppose you're talking about handler definition, but not its processing, because that's what you're trying to prevent.
Solution 1: remove attribute completely
$(function(){
$(window).load(function(){
$("a").removeAttr("onclick");
});
});
Solution 2: change attribute code
$(function(){
$(window).load(function(){
var link = $("a");
var existing = link.attr("onclick");
link.attr("onclick", "return;" + existing);
});
});
Solution 3: change attribute but store definition
$(function(){
$(window).load(function(){
var link = $("a");
var existing = link.attr("onclick");
link.attr("data-onclick", existing)
.removeAttr("onclick");
});
});
This JSFiddle shows all three solutions. I've written it so that it doesn't change links on page load but rather simulates page load by clicking a link. Click any of the first three links first then simulate page load and click any link again and you'll see that all of them work.

You can try this
Using CSS
a{
pointer-events: none;
}
Dynamically using jquery
$(document).ready(function(){
$('a').css('pointer-events','none');
});

write script like below
$(window).load(function(){
$("a").removeAttr("onclick");
});

Can't listen to hover (etc) events after creating divs using innerHTML

So I generate some divs using this
document.getElementById('container').innerHTML += '<div class="colorBox" id="box'+i+'"></div>';
The problem I'm running into is that catching a hover event
$(".colorBox").hover(function(){
alert("!");
});
Won't work after doing that. Any thoughts?
EDIT:
To be more clear, check this out: http://graysonearle.com/test/16_t.html
I need to be able to have hover events happen after changing innerHTML that happen dynamically and many times. So like after changing the number of columns, the hover effect needs to work.
THANKS TO CHOSEN ANSWER:
For those in the future that might want to do something similar, my code looks like this now:
$(document).ready(function(){
document.body.onmousedown = function() {
++mouseDown;
}
document.body.onmouseup = function() {
--mouseDown;
}
$(document).on("mouseenter",".colorBox",function(){
if(mouseDown){
var clicked = $(this).attr("id");
var clicked = clicked.substring('box'.length);
next_color(clicked);
}
$(this).css("border-color","#ff0");
}).on("mouseleave", ".colorBox", function() {
$(this).css("border-color","#aaa");
});
$(document).on("click",".colorBox",function(){
var clicked = $(this).attr("id");
var clicked = clicked.substring('box'.length);
next_color(clicked);
});
});

whenever we update DOM from server side code or client side code.
For EX. DIV we are updating then it will not work with events we loaded before if we load that partial data.
so for this in document ready
code like this.
if you are using jquery 1.7+
then code like
$(document).on("hover",".colorBox",function(){
alert("Hi it will load after partial div update as well");
});
$(document).delegate(".colorBox","hover",function(){
alert("Hi it will load after partial div update as well");
});
and if you are using jquery 1.6 or less then that.
then use
$(".colorBox").live("hover",function(){
alert("Hi it will load after partial div update as well");
});
http://oscarotero.com/jquery/
If this helped you please mark as answer.

First, as you're using jQuery your first code could be simplified using the below function.
$('#container').append('<div class="colorBox" id="box'+i+'"></div>');
Second I think this is because you haven't declared the hover-off function.
$(".colorBox").hover(
function(){
alert("On");
}
);
Working Fiddle

You have to call your hover code AFTER injecting your divs. Jquery doesn't automatically listen to dom changes, so if you hook all your colorBoxes in $(document).ready(){...} and then insert a new div, nothing will ever happen.
So this works fine:
$(document).ready(function(){
for(i=0; i<5; i++) {
document.getElementById('container').innerHTML += '<div class="colorBox" id="box'+i+'"></div>';
}
$(".colorBox").hover(function(){
alert("!");
});
}

jquery: Unable to have the click event fire on image tag

I have a javascript code that have span tag and inside the span tag there is an image tag and normal text next to the image tag. I want to bind the click event on image tag but the event didn't fire at all. I use the jquery to accomplish this.
var a = new Image();
$(a).prop('src','blah');
$(a).load( blah);
$(span).append($(a));
$(a).click(function (e) { alert('asdf'); } );
not event if i do this
$(span).find($(a)).click( blah );
var button = $(this.imgClose).clone();
$(button).prop('id', 'close');
$(template).append($(button));
$(template).find('#close').on('click', '', function (event) { alert('sss'); });

Please try this since you are appending the a and then trying to click
Rest you can see #gdoron 's & #Andrew stuff above as well
API reside here: http://api.jquery.com/on/
Also prop vs attr : .prop() vs .attr()
hope this helps,
code
$('a').on('click', function(){
alert('HULK');
});

$(span).append($(a));
Should be:
$('span').append($(a));
Live DEMO

A click function not working

my a click jquery function is not working, it just doesn't give any errors at console at all too.
Here is the link -
Edit
and here is the click function
$('a').click(function() {
var item = $(this).attr("id");
alert(item);
return false;
});
It doesn't popout the alert box, nor it does show me error in console.
Okay, someone asked for more info -
The link is added with jquery, by pressing button, and as id it takes one of the input fields value and inserts it as link with id from input field. There are no duplicate ids, all javascript scripts are located at the end of head tag, and the a click function is located last in part.

Based on your edit that the <a> tag is being inserted dynamically, you'll need to use jQuery's .on() (jQuery version 1.7 and later) or .live() method to attach the click handler.

This code should work, so I suppose there is some other error before this code runs that prevents correct Javascript execution.
Edit: OR the DOM is not yet ready when you insert the Javascript code. Then you should use
$(function() {
$('a').click(function() {
var item = $(this).attr("id");
alert(item);
return false;
});​
});

Are you wrapping it on the ready event or after the element has been displayed? If so then it should work;
http://jsfiddle.net/sWeRf/

Either place this code after the Edit on the page, or put it in the head with $(document).ready(function() { //Place code here. });

Can you try replacing your JS code with the following (put between the HEAD tags)
<script type="text/javascript">
$(document).ready(function(){
$('a#lang').click(function(){
alert($(this).attr('id'));
});
});
</script>

Are you checking the document is loaded before applying your JQuery click handler?
e.g.
$(document).ready(function() {
$('a').click(function() {
var item = $(this).attr("id");
alert(item);
return false;
});
});

Instead of using document.ready you can use an anonymous function that does the same thing.
Like this:
$(function() {
$('a').click(function() {
var item = $(this).attr("id");
alert(item);
return false;
});
});

To remove the item do this:
$('#language_c').remove();

Applying Jquery to dynamically created images

I'm new to Javascript/Jquery and PHP and I'm experimenting with it. Basically, I've created a simple image gallery in which each picture is at an opacity of .4 until you mouse over it and it becomes 100% opacity. Now I've gone a step further and used PHP to scan a directory of images and add them to the list of pictures in the gallery. The current code looks like this:
$(document).ready(function(){
var i = 0;
var names;
function returndata(files){
names = files;
for(i=0; i < names.length ; i++){
$('<li id="img_' + i + '"><img src="../Gallery_pictures/' + names[i] + '"/></li>').appendTo('#thumbnails ul');
}
}
$.post('../php/read_directory.php',function(data){
var files = $.parseJSON(data);
returndata(files);
});
});
The code works and adds the images to the list on the webpage, but how would I go about adding the Jquery fade to the newly created images? I've searched all over the place for an answer to this but maybe I'm just missing the answers. This and the image fade are in separate external Javascript files. Thanks in advance.
*EDIT:*Okay so I got it to work using your suggestions, but the problem now is that the script doesn't start until an image is initially moused over. All the pictures start full opacity until moused over then they all become .4 opacity. Any way to fix this? I'm also going to try if I can easily do this in css.
*DOUBLE EDIT:*So I can easily do this with css and it works like I want it to. Thanks for the replies everyone.

Use on to set events on dynamically added content
$(document).on("mouseover", "#thumbnails img", function() {
$(this).css("opacity", 1);
});
$(document).on("mouseout", "#thumbnails img", function() {
$(this).css("opacity", 0.4);
});
If you're using jQuery pre 1.7, then you can use delegate. Note that delegate takes the selector first, then the event name.
$(document).delegate("#thumbnails img", "mouseover", function() {
$(this).css("opacity", 1);
});
$(document).delegate("#thumbnails img", "mouseout", function() {
$(this).css("opacity", 0.4);
});
Avoid using live since it's deprecated.

Use .live() or .on() to bind event to dynamically added elements.
.live() is deprecated in jQuery 1.7

Try to add class="hoverImg" to your img and then do the following:
$('.hoverImg').on('hover',function(){
// here goes your hover code
});
So every image has the class .hoverImg also the new ones. And you bind the event hover on every single image that has the class .hoverImg. And why do you have to use .on() simply because this makes sure that the code is also executed if img's are added to your dom after it has been fully loaded.