jQuery radio button on change does not work

Question

I have seen this question and I have seen this fiddle.

My Fiddle here. It's a simple question. Why doesn't it work?

#html
<input checked="checked" id="article_format_html" name="article[format]" type="radio" value="html">Some meaningful value
<input id="article_format_text" name="article[format]" type="radio" value="text">Another Value

#js
$("input[name='article[format]']:radio").change(alert('hola'));

Edit:

On popular demand I did this:

.change(function(){alert('hola')});

Fiddle.

Result: Doesn't work.

Edit 2: (Why I had the problem)

So, JS-Fiddle wraps your js code in the head of the iframe that is your Result section. For jQuery selectors (or any js that manipulates the DOM) to work properly, it has to be executed *after* the DOM element has been rendered. Hence, wrapping your code on ready and/or just before body closes, is the safest way to ensure that your query selectors don't return undefined.

Answer 1

1. Use a callback or anonymous function block
2. You are using jQuery 1.11 (better to use .on syntax)

Demo: http://jsfiddle.net/abhitalks/e5ByP/2/

$("input[name='article[format]']:radio").on("change", function() { 
    alert('hola'); 
});

Answer 2

You code is not working because you are not wrapping your jQuery inside document.ready function:

$(document).ready(function()
{
   $("input[name='article[format]']:radio").change(function()
   {
       alert('hola')
   });

});

FIDDLE DEMO

Answer 3

The code with .on() should be:

$(document).on('change',"input[name='article[format]']:radio",function(){alert('hola')});

Working fiddle: http://jsfiddle.net/e5ByP/10/

Answer 4

Wrap that in a anonymous function and DOM ready:

$(function () {
    $("input[name='article[format]']:radio").change(function () {
        alert('hola')
    });
});

Demo:http://jsfiddle.net/e5ByP/6/

Answer 5

That is because you have incorrect change handler syntax. also you need to wrap the code in DOM ready :

$("input[name='article[format]']:radio").change(function(){
  alert('hola')
});

Demo

Answer 6

In your code you not wrap handler with .change()

handler is A function to execute each time the event is triggered.

Type: Function( Event eventObject )

Try This :

$("input[name='article[format]']:radio").change(function(){
  alert('hola')
});

Working Example

Answer 7

Please use anonymous callback function in change event

$("input[name='article[format]']:radio").change(function(){
  alert('hola');
});

Answer 8

Put the code in document ready and try like this. Please see the syntax too

$(function () {
    $("input[name='article[format]']:radio").change(function () {
        alert('hola')
    });
});

Answer 9

put that in side document raedy

like this:

$(document).ready(function () {
$("input[name='article[format]']:radio").change(function(){
    alert('hola')
});
});

demo

Answer 10

Use the below code

Always use DOM manipulation and events only after DOM gets fully loaded

$(document).ready(function(){
        $("input[name='article[format]']:radio").change(function(){alert('hola')});
    });

Answer 11

You forgot the $(document).ready() and also u forgot to write function() in change()

$(document).ready(function(){
    $("input[name='article[format]']:radio").change(function(){
        alert('hola')
    });
});