Develop Reference

JavaScript alert callback not working inside a function

I am trying to make a image preview containing of about 5-6 images which will appear one after another when user hovers over it (not like a carousel with prev and next buttons). Here is the fiddle consisting of what I gathered so far.. i don't know if this approach is right or not.. but I am stuck as the alert callback is not working. Could someone please tell me what is wrong?
$(function()
{
var imageCount = $('#product_grid_list').find('figure')[0].getElementsByTagName('img');
for (var i = 0, n = imageCount.length; i < n; i++) {
imageCount[i].on('click', function(e)
{
alert('Everything is going fine!');
}
);
}
}
);

The root cause of click event callback can't be triggered is that you're trying to register a event handler on a "DOM" (in this case: imageCount[i]) element in jQuery way. Try to register the event handler like this if you want to use pure javascript solution:
imageCount[i].addEventListener('click', function(e){
alert('Everything is going fine!');
});
Here is a jsfiddle demo.
Note: I didn't consider the cross browser issue in this case.
BTW, try to cache the length of imageCount node list, it will improve the performance.

You are using js AND jQuery at same time. It's wrong. If you use jQuery, than click event will be like this:
$(document).('click', '#product_grid_list figure img', function(){
alert('Everything is going fine!');
});

You are using a mix of jQuery and standalone javascript. You might as well go all the way to jQuery, with something like:
$('#product_grid_list figure:first img').click(function(e) {
alert('Everything is going fine, hopefully!');
});
You did not send the corresponding HTML, so we cannot test whether the above is correct.

it's just a simple click event in jQuery, no need to use js: http://jsfiddle.net/wP3QQ/11/
$('#product_grid_list').find('figure img').click(function(e){
alert('Everything is going fine!');
e.preventDefault();
});

You want the hover effect, so click event should not be used over here. It should be mouseover.
Working Fiddle
Code Snippet:
$(document).on('mouseover','#product_grid_list figure img',function(e){
alert("now it is working");
});

You are attempting to call on(), a jQuery method, on an HTMLElement (a DOM element). You can't do that, jQuery methods can only be called on jQuery collections. It's easy to get a jQuery collection for the elements you desire:
Use .find() to match the images
There's no need for a for() loop, jQuery's .on() will handle looping for you.
You may also want to prevent the default behaviour of your anchors
$(function () {
var imageCount = $('#product_grid_list').find('figure img');
imageCount.on('click', function (e) {
e.preventDefault()
alert('Everything is going fine!');
})
});
JSFiddle

let anchor tag not firing when clicked

I am using JQuery Ajax to grab data. I want to have all anchor tags in my code that if somebody clicks on a tag, it doesn't fire and call Ajax instead. The following is my code, but it does not work.
$('.one_item a').each(function(){
$(this).live('click', function(){
alert($(this).attr('href'));
return false;
});
});
I am using JQuery version 1.5, so .live should work. Any ideas? Cheers.

.live has to be applied to the selector. When you use .each(), you don't get the benefit of handling events on elements added dynamically, because you're just iterating over the elements found at the time the loop was run.
$('.one_item a').live('click', function(){
alert($(this).attr('href'));
return false;
});

You can use .live() directly on the selector:
$('.one_item a').live('click', function(e) {
e.preventDefault();
alert($(this).attr('href'));
});
It should work, see this demo.
However, it keeps iterating alert($(this).attr('href'));. How can I make it fire only on the items I clicked?
Make sure you are not triggering the click() event loop somewhere else, such as:
$('.one_item a').each(function() {
$(this).click();
// other stuff
});

jQuery preventDefault function not working on jsfiddle

I cannot get the following simple jQuery to work. I know I am overlooking something, so please help me out. Here is the code at http://jsfiddle.net/Z5waA/. It's a simple click the button, then alert with jQuery.

preventDefault(e); should be e.preventDefault();
code should be like this,
$('#submitResetPass').bind('click', function(e) {
e.preventDefault();
alert("hello");
});
and you need to add jQuery reference.

You had a couple issues. First, the jsFiddle wasn't set for jQuery. Then, your call to preventDefault wasn't correct. It works here: http://jsfiddle.net/jfriend00/v9aVb/.
$('#submitResetPass').bind('click', function(e) {
e.preventDefault();
alert("hello");
});

Use e.preventDefault() instead of preventDefault(e).

applying script to elements inserted via jquery .html()

i'm kinda new to scripting so this might be a bit basic, but i couldn't find an answer anywhere.
To improve my webpage loading time I made some HTML element load (via AJAX) and inserted only when a certain button is clicked, using the jquery .html() function.
That worked, but now all the jquery commands which referred to that element don't seem to apply. I'm guessing it's because the original commands were loaded before the new HTML?
For example, code like this:
$(document).ready(function(){
$('#myButton').click(function(){
$('#placeHolder').html('<div id="touchMe">click me</div>');
});
$('#touchMe').click(function(){
alert ("WORKED");
});
}
How do I make the #touchMe.click command apply to the new incoming HTML?
thanks a lot

Take a look at live()
$('#touchMe').live('click', function() {

Try -
$('#touchMe').live('click',function(){
alert ("WORKED");
});

Instead of
$('#touchMe').click(function(){
alert ("WORKED");
});
use
$('#touchMe').live('click', function(){
alert ("WORKED");
});

you use .live() or .delegate() function instead of click.
$(document).ready(function(){
$('#myButton').live('click', function(){
$('#placeHolder').html('<div id="touchMe">click me</div>');
});
$('#touchMe').live('click', function(){
alert ("WORKED");
});
}
note: the live on "mybutton" is not necessary in this example.

Double execution on a single click jquery

i am having a problem when i click on an input(button) (click event captured using jquery) it is executed two times but the click event is single... i used "e.stopPropagation();" - but it didn't work...
jQuery("#ok").click(function(e){
alert("Alert");
e.stopPropagation();
});
i need the reason and the solution...
take care..

problem is solved...
i just added e.stopImmediatePropagation(); to the click function... and it worked... None of the following functions worked...
e.preventDefault();
e.stopPropagation();
return false
---------------------CODE---------------------
jQuery("#ok").click(function(e){
alert("Alert");
e.stopImmediatePropagation();
});
Click here for more information on jQuery Events..

Please use e.stop(true,true) and function which you are using. like
e.stop(true,true).show();

I think you use this code as below:
jQuery("#ok").click(function(){
alert("Alert");
return false;
});

e.preventDefault() is likely what you are looking for.

i used
return false;
after the desired action.