We Keep Coding

In virtual table click function is not working

click function is not working. I don,t know the reason
$("img[id^='down']").click(function(){
alert("hi");
});
after collect some data, a table is display in browser with down image. i need click function for that image but its not working
please help me where iam wrong

Because your target element doesn't exist on page load and it loaded using ajax, the
$("img[id^='down']").click(...
doesn't work. You should use event delegation. So your code should changed to
$(document).on('click', "img[id^='down']", function(){
alert("hi");
})

Cannot target dynamically generated element with jQuery

One of the pages I'm working on has a modal containing a form which, when viewed on most mobile iOS devices, displays the caret/cursor in the wrong place when each input is focused. A number of people have reported this problem, including this page here.
On their advice, I was attempting to write some JS to hide the body content, etc. I'm having a hard time binding to the click event of the .new-appt and .timeslot elements.
I have tried:
A) jQuery('.new-appt').click(function(){ alert(); });
B) jQuery('.timeslot').click(function(){ alert(); });
C) jQuery(document).on('click', '.new-appt', function(){ alert(); });
D) jQuery(document).on('click', '.timeslot', function(){ alert(); });
E) jQuery(document).live('click', '.new-appt', function(){ alert(); });
F) jQuery(document).live('click', '.timeslot', function(){ alert(); });
And when pasted in the console, A through D seem to trigger fine, but not in a script block. I've also tried to placed them in a jQuery(document).ready, but that didn't seem to help.
Any advice appreciated.

You have to attach event listener to elements after these DOM elements are ready. In this case its moment when DOM in modal is ready. So basicaly you should register click event at bottom of handler that open and creates content of this modal.

SharePoint; Javascript repeating click event already on page

I have a SharePoint calendar, and I've got some Javascript code to force a calendar overlay event to open in a modal dialog. Basically, it forces them to open in a modal dialog via this code:
$('.ms-acal-ddiv a').click(function(){
EditLink2(this,'WPQ2');
return false;
});
The problem is that there are already "native" events on the calendar which open with this code, and what is happening is that when you click on it, the events open TWICE with a modal dialog, thus rendering the page unusable.
I'm not savvy with writing jquery or javascript. How can I write the javascript to look for that code that's bolded, and prevent it from running if the link already executes with that?
Thanks for the help in advance.

Try this:
$('.ms-acal-ddiv a').click(function(event){
EditLink2(this,'WPQ2');
event.stopPropagation();
event.stopImmediatePropagation()
return false;
});
Which will prevent the click event from bubbling up.
http://api.jquery.com/event.stopPropagation/
http://api.jquery.com/event.stopImmediatePropagation/

I was having the same problem. The following code seems to have cleared it up for me:
$('.ms-acal-mdiv a, .ms-acal-ddiv a, .ms-acal-sdiv a').click(function(event){
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
EditLink2(this,'WPQ2');
});
I wonder if the return false gets in the way of whatever eventually tells the overlay to disappear.

jQuery - catch and override links with target=_blank

We have legacy pages which have links where target="_blank". On clicking these I'd like to ignore that and run a some JavaScript I have for opening windows.
Is this possible with jQuery, if so what methods/terms should I research?
Thanks in advance

Just use event delegation to prevent the links with target="_blank" from working, example:
$(document).on('click', 'a[target="_blank"]', function(event) {
event.preventDefault();
alert('Prevented');
});

$('a[target=_blank]').click(function(e){
e.preventDefault();
//do what you want here
});
Demo: http://jsfiddle.net/kkhNr/1/

Try this
$('a[target=_blank]').click(function(event) {
event.preventDefault();
// Now make a call to your own function
});

I just wanted to point out that #Roger C's listener is a better solution...if you have any dynamically loaded content on your page (i.e. AJAX or AngularJS single page applications).
This listener listens to the document's clicks and will pickup newly added content without needing to re-add the listener after content changes:
$(document).on('click', 'a[target="_blank"]', function(event) {
event.preventDefault();
alert('Prevented');
});
This listener listens to all selectors found at the time it was called (possibly missing any newly added content):
$('a[target=_blank]').click(function(e){
e.preventDefault();
alert('Prevented');
});

jQuery Event Listeners

Is there a way using jQuery to add event listeners much like the ones that are available in AS 3.0?
For example, if you load an image, (setting it's opacity to zero so that it doesn't appear on screen) does jQuery have something similar to an onComplete event listener that listens out for when load has completed? Once the load has successfully loaded then you could fire off another function to fade it's opacity back to 1 again.
I've seen a few plugins that have been written, but thought I'd ask a question to see if anyone has found an solution without the use of 3rd party plugins.
Thanks.

Something like this?
$(function(){
$("img").hide().load(function(){
$(this).fadeIn();
});
});
The first line is shorthand for $(document).ready(function(){
Then we simply select all the img elements, and hide them and add a load handler to them which fades them in.
Although, if cached the above could prove to be trouble. The below would solve this.
$(function(){
$("img").hide().each(function(){
if(!$(this).width()){ // image dimensions are unavailable if it's not loaded
$(this).load(function(){
$(this).fadeIn();
});
}else{ //if the image is loaded already
$(this).fadeIn();
}
});
});