Javascript – jQuery click(fn) won’t work with input element

event-handlingjavascriptjquery

I want to use jQuery to detect clicks on a bunch of radio buttons. They have all been assigned a css class, foobar, to detect them. Easy, right? Still, this code doesn't work:

$("input.foobar").click(function ()
{ 
    alert(this.id);
}
);

What wrong with the code above?

Does this.id really return the id of the current radio button?

EDIT: The HTML on the page is really borked (doesn't valdiate), so maybe that's the problem…

EDIT 2: The HTML is messed up beyond salvation. Will have to let it be and fix a workaround. May the HTML Gods forgive me!

Best Solution

$("input.foobar").change(function () {
    alert(this.id);
});

Related Solutions

Javascript – How to detect a click outside an element

Note: Using stopPropagation is something that should be avoided as it breaks normal event flow in the DOM. See this CSS Tricks article for more information. Consider using this method instead.

Attach a click event to the document body which closes the window. Attach a separate click event to the container which stops propagation to the document body.

$(window).click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

Javascript – How to check if an element is hidden in jQuery

Since the question refers to a single element, this code might be more suitable:

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

It is the same as twernt's suggestion, but applied to a single element; and it matches the algorithm recommended in the jQuery FAQ.

We use jQuery's is() to check the selected element with another element, selector or any jQuery object. This method traverses along the DOM elements to find a match, which satisfies the passed parameter. It will return true if there is a match, otherwise return false.

Best Solution

Related Solutions

Javascript – How to detect a click outside an element

Javascript – How to check if an element is hidden in jQuery

Related Question