Develop Reference

jQuery On Not working for simple script

There must be some mental block that I'm just not getting...My entire site is working fine, but dynamically created links with an ID are not. Something is wrong in my code...it's as simple as this but it's not working, please show me my dumb mistake (I know it's something simple).
so for example this would be a generated link:
Hi
and then I have this script:
$(document).ready(function() {
$(document).on('click','#himan',function(){
alert('hi');
});
});
but nothing happens, and I get no errors...I'm lost, maybe my coffee is not working today. Can someone help me?

Here is demo
It is working perfect:
$(document).ready(function () {
$(document).on('click', '#himan', function () {
alert('hi');
});
});
reason might be duplicate of id, there must only one element with specific id because id is a unique on a page, if you adding multiple element use class instead of id.

Handle the click event on #himan itself...
function initializeDynamicLinks() {
$('#himan').on('click',function(){
alert('hi');
});
}
$(document).ready(function() {
initializeDynamicLinks()
});
Here you see it working: http://jsfiddle.net/digitalextremist/emUWL/
Rerun initializeDynamicLinks() whenever you add links dynamically.
And... as has been pointed out several times in comments, you need to make sure #himan only occurs once in your source to be completely sure everything will function properly.

prettyPrint() only has an effect once. (google-prettify)

I have this JavaScript (with jQuery):
var g_files_added, socket, cookie, database = null;
var file_contents = [];
function viewFile(key, filename) {
$('#title-filename').text(filename);
$('.prettyprint').text(file_contents[key]);
$('#viewFileModal').modal('show');
}
$(document).ready(function() {
$(document).on('shown', '#viewFileModal', function(event) {
prettyPrint();
});
});
// Variables have been set in code not shown, irrelevant to problem.
// prettyPrint() is called everytime the #viewFileModal is shown,
// but its effect is only felt once.
So prettyPrint() is invoked every time the viewFileModal modal box (courtesy of Bootstrap) is shown, it's just that it only seems to have an effect once per page load.
I have tried commenting out prettyPrint() and entering at the JS console after making the modal box appear. It indeed only has an effect the first time the box is shown (per page load).
Any ideas? I have been stuck on this a while. I also tried putting the call to prettyPrint() in the viewFile function; but the effect is the same.
Thanks a lot.
Sam.

Calling "prettyPrint()" adds a class to your PRE tags named "prettyPrinted" after it has been prettified. The line below will remove all instances of the "prettyPrinted" class on your page so that the prettyPrint() function can re-prettify you're PRE tags. This can be done without dynamically adding PRE tags to DIVs.
$('.prettyprinted').removeClass('prettyprinted');

Thanks to Matei. Solution was to change to be like this.
That is, add whole pre dynamically rather than just text.
var g_files_added, socket, cookie, database = null;
var file_contents = [];
function viewFile(key, filename) {
$('#title-filename').text(filename);
$('#fileblock').html('<pre class="prettyprint">' + file_contents[key] + '</pre>'); // fileblock is a div.
$('#viewFileModal').modal('show');
}
$(document).ready(function() {
$(document).on('shown', '#viewFileModal', function(event) {
prettyPrint();
});
});
:)

Joseph Poff answer is correct but you have to be careful. prettPrint() wraps everything in scan tags. If you remove the prettyprinted class, you aren't removing the scan tags. Unless you are clearing the contents of your pre (or stripping out all the scan tags), every time you recall prettyPrint() you will be adding scan tags, which will wrap your old scan tags. It can get out of control really quickly.

Unable to find click event

Here is my JQuery Code:
$(function () {
$('[id*=clickbtn]').click(function () {
var url = "WindowPages/EditorControl.aspx?controlName=" + this.name;
oWnd.setUrl(url);
oWnd.show();
});
});
Now the problem is, i have 4 to 5 buttons whose id contains 'clickbtn' when i click the any one of them for first time it works well. But it does not works for second click, any help why is this happening?
[EDIT]:
I tried putting the JQuery on page and it worked.. But wnt to know why it does not work on when i put the same on .JS file?

Yes, the result of your event handlers depends very much on the content of your event handlers. If you'd like to share with us the rest of the code we might be able to help. For now the answer is: working as intended
jsFiddle
If your clicks only work on the first try, then I can assure you that it is only the missing code which is to blame. Provide the contents of oWnd.setUrl and oWnd.show and we might be able to help.

Your wildcard selector is wrong. It should be
$("[id$=clickbtn]")

Try this:
$('input[ID*="Button"]')
OR
First set class="btn" to all buttons you want to do this action then
$(function() {
$('.btn').click(function() {
var url = "WindowPages/EditorControl.aspx?controlName=" + this.name;
oWnd.setUrl(url);
oWnd.show();
});
});

How do I run a jQuery function when any link (a) on my site is clicked

I have a new site build on corecommerce system which does not have much access to HTML and non to PHP. Only thing I can use is JavaScript. Their system is currently not great on page load speed so I wanted at least customers to know something is happening while they wait 5-8 seconds for a page to load. So I found some pieces of code and put them together to show an overlay loading GIF while page is loading. Currently it will run if you click anywhere on the page but I want it to run only when a link (a href) on the site is clicked (any link).
I know you can do a code that will run while page loading but this isn't good enough as it will execute too late (after few seconds)
Anyway, this is my website www.cosmeticsbynature.com and this is the code I use. Any help will be great.
<div id="loading"><img src="doen'tallowmetopostanimage" border=0></div>
<script type="text/javascript">
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
jQuery(document).click(function()
{
if(ns4){ld.visibility="show";}
else if (ns6||ie4)
var pb = document.getElementById("loading");
pb.innerHTML = '<img src="http://www.cosmeticsbynature.com/00222-1/design/image/loading.gif" border=0>';
ld.display="block";
});
</script>

Doing this will be easier if you include jQuery in your pages. Once that is done, you can do:
$('a').click(function() {
// .. your code here ..
return true; // return true so that the browser will navigate to the clicked a's href
}

//to select all links on a page in jQuery
jQuery('a')
//and then to bind an event to all links present when this code runs (`.on()` is the same as `.bind()` here)
jQuery('a').on('click', function () {
//my click code here
});
//and to bind to all links even if you add them after the DOM initially loads (`on()` is the same as `.delegate()` here; with slightly different syntax, the event and selector are switched)
jQuery(document).on('click', 'a', function () {
//my click code here
});
Note: .on() is new in jQuery 1.7.

what you are doing is binding the click handler to the document so where ever the user will click the code will be executed, change this piece of code
jQuery(document).click(function()
to
jQuery("a").click(function()

$("a").click(function(){
//show the busy image
});

How about this - I assume #loading { display:none}
<div id="loading"><img src="http://www.cosmeticsbynature.com/00222-1/design/image/loading.gif" border=0></div>
<script type="text/javascript">
document.getElementById('loading').style.display='block'; // show the loading immediately
window.onload=function()
document.getElementById('loading').style.display='none'; // hide the loading when done
}
</script>

http://jsfiddle.net/vol7ron/wp7yU/
A problem that I see in most of the answers given is that people assume click events only come from <a> (anchor) tags. In my practice, I often add click events to span and li tags. The answers given do not take those into consideration.
The solution below sniffs for elements that contain both events, which are created with jQuery.click(function(){}) or <htmlelement onclick="" />.
$(document).ready(function(){
// create jQuery event (for test)
$('#jqueryevent').click(function(){alert('jqueryevent');});
// loop through all body elements
$('body *').each(function(){
// check for HTML created onclick
if(this.onclick && this.onclick.toString() != ''){
console.log($(this).text(), this.onclick.toString());
}
// jQuery set click events
if($(this).data('events')){
for (key in($(this).data('events')))
if (key == 'click')
console.log( $(this).text()
, $(this).data('events')[key][0].handler.toString());
}
});
});
Using the above, you might want to create an array and push elements found into the array (every place you see console.log

jQuery - Click on X, grab the NAME, then use that to show a related element

Here's what's happening.
My page loads. Then jQuery loads a feed which is injected into a contentCol div...
in that feed is:
Comment
There is also:
<div class="storyItemComments" id="storyItemComments_66" style="display:none;">....
For some reason this is not working:
$(".commentWrite").live("click",function(){
cmt2open = $(this).attr('name');
$("#" + cmt2open).show();
return false;
});
Any ideas? The only thing I can think of is that it has something to do with the fact that I am using jQuery AJAX to load in the content which the LIVE statement above is referencing....
thanks

on most occasions people should use the die() function before the live... so that will clear any previews instructions and that function is only triggered once...
another thing could be that the instructions are called before the contents are retrieved from the ajax. therefore you should use .success to check if the ajax was successfully loaded and then trigger the click instructions.
as it seems that the <div id="storyItemComments_66" has not been picked up from the DOM.

Following from your comment to this answer
Can you try the following instead of show()?
$("#" + cmt2open).attr('display', 'block');

Can you place your javascript inside;
$(document).ready(function(){
//your code here
});
Not sure this will fix it but it's good practice I find.
Also have you alerted out your variables to see what you get?
What is the error you are getting if any?
Have you tried putting an alert at the top of the function to see if the click event works?
edit
let me know if the above does not fix it and I'll remove this answer to clear out the noise