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

Can't remove element with jquery's remove()

I'm making a greasemonkey script for this website: http://tinyurl.com/websiteasdasd and I want to remove the element rodape-ao-vivo, problem is that doing $("#rodape-ao-vivo").remove(); is not working, however, if I do something like
setInterval(function() {
$("#rodape-ao-vivo").remove();
}, 1000);
it works just fine, so I'm basically asking you to help me understand what's going on here. Maybe it's just a small stupid thing but I'm sleepless and really want to get this done.

This DIV is dynamically generated by script, to remove it, you need to wait until this element is availabe in DOM, e.g if for some reason other answers don't work: {or use DOM ready handler}
$(window).on('load', function () {
var interval = setInterval(function () {
if ($("#rodape-ao-vivo").length) {
$("#rodape-ao-vivo").remove();
clearInterval(interval);
}
}, 100);
});

Please make sure that all the elements gets loaded before your use them.So wrap your code inside function which will ensure your elements has been attached to DOM
$("#rodape-ao-vivo").remove(); //will probably will give you an error.
$(function() {
$("#rodape-ao-vivo").remove();
}
Or ,
$( document ).ready(function() {
$("#rodape-ao-vivo").remove();
})
Or,
jQuery( document ).ready(function( $ ) {
$("#rodape-ao-vivo").remove();
});
Or,
window.onload = function() {
$("#rodape-ao-vivo").remove();
}
But when you do ,
setInterval(function() {
$("#rodape-ao-vivo").remove();
}, 1000);
This will give an element time to get load in your DOM.So It working fine.But instead of using setInterval you can use function listed above

Hmm, perhaps you are trying to remove the element before it's created? (The delay helps because in that time the element gets created and you can remove it)

You probably try to remove the element before it even exists. Adding one second delay gives the browser enough time to render the element, so you can remove it then. But it's not guaranteed to work, because one second may not be enough to render that element (slow connection, for example).
So you should make sure the document is ready, jQuery's way to do this is:
$(function() {
$("#rodape-ao-vivo").remove();
});
Or you can wait for the whole document to load:
window.onload = function() {
$("#rodape-ao-vivo").remove();
}

if your doing this when the page is loading then wrap your code use document.ready();
$(document).ready(function(){$("#rodape-ao-vivo").remove();});

getting rid of duplicated code in jQuery

What is the most elegant way to beautify the following code? I would like to get rid of duplicated code:
$('#popup_settings_enable_name').click(function() {
$el = $('#popup_settings_name_field');
if ($(this).prop('checked')) {
$el.removeAttr("disabled");
} else {
$el.attr("disabled", "disabled");
}
}).each(function() {
$el = $('#popup_settings_name_field');
if ($(this).prop('checked')) {
$el.removeAttr("disabled");
} else {
$el.attr("disabled", "disabled");
}
});

You can simply trigger the click event handler after installing it using .triggerHandler:
$('#popup_settings_enable_name')
.click(function() {
// ...
})
.triggerHandler('click');
Note that .trigger would also do the exact same thing in many cases, but there are subtle differences between .trigger and .triggerHandler you should be aware of. The manual page makes clear mention of them.

You can simply trigger the event to execute the handler for initialisation:
$('#popup_settings_enable_name').click(function() {
…
}).click();
Another method would be to just use a function declaration:
function update() {
// a little simplification:
$('#popup_settings_name_field').prop("disabled", !this.checked);
}
$('#popup_settings_enable_name').click(update).each(update);

Triggering the click event manually could have unintended side effects (what if there are other delegates that have also been assigned the click event?)
I would suggest refactoring the duplicated code into its own method, then simply pass that method into the jQuery .click() function, and then passing it into the jQuery .each() function.

Event delegation in jQuery, how to do it?

In JavaScript i used to use event delegation like this :
someDiv.addEventListener('click', function(evt){
if(evt.target.id == "#someChild"){
// Do something..
} else if(evt.target.id == "#anotherChild"){
// Do something else..
}
}, false);
What's the equivalent of this in jQuery? i know about .on() but how to use it in event delegation ? i mean is this how is it done :
someDiv.on('click, '#someChild, #anotherChild", function(evt){
if($(this).is("#someChild")){
// Do something..
} else if($(this).is("#anotherChild")){
// Do something else ..
}
});
But wouldn't it be just the same as in vanilla JavaScript ? I want to know if there's a better way to achieve it. And if this is the only way, what's the benefit of jQuery way over JS one ?

You can do:
$(someDiv).on('click', '#someChild, #anotherChild', function(){
if(this.id ==='someChild'){
// Do something..
} else if(this.id === 'anotherChild'){
// Do something else ..
}
});
Or create two event handlers if you do different things for both elements anyway:
$(someDiv).on('click', '#someChild', function(){
// Do something..
}).on('click', '#anotherChild', function() {
// Do something else ..
});
But wouldn't it be just the same as in vanilla JavaScript ? I want to know if there's a better way to achieve it. And if this is the only way, what's the benefit of jQuery way over JS one ?
Of course it's basically the same, jQuery just makes your life a bit easier by providing a wrapper around the DOM API, but it does not change how the DOM works.
There is a difference though, namely that this will refer to the element matched by the selector, not to the element the handler is bound to.
In general, the advantage is that the jQuery code is more cross-browser compatible than using addEventListener.

With jQuery you'd do it like this:
function onButtonClick(e) {
//this = the button that was clicked
}
$(document.body).on('click','button',onButtonClick)
You can read the docs here

You could start here, if this element is created dynamically, and not there on page load
$(document).on('click', '#someChild', function(evt) {
// Do something..
});
If the element is created before the page is rendered then this will work
<input type="button" onclick="fnClickfn();" id="xxx" />
EDIT:
Oh, also .on only works in later versions on jQuery (I think 1.6 and above), so make sure you aren't using an old version that would require .live and .die.

How to ignore click() if an element has a certain class in jQuery?

I know this should be easy stuff, but for some reason the click event is still firing for the element that has a "selected" class.
Can anyone spot the problem with this line?
h.find("li a").not("li a.selected").click(function () {

Use
.not('.selected')
The not() filter applies to the current element

$(function() {
$('div:not[.someclass]').click(function() {
// do stuff
});
});