I want a function to be fired whenever one option of a radio element is checked. The radio elements are dynamically created by using Jquery

Question

I want to place a function on input radio elements. These input radio elements are created dynamically by using Jquery.One dynamically-created(by user's click) input element looks as follows:

<div class="below">
<input type="radio" value="information" name="option0"/>
information
<input type="radio" value="communication" name="option0"/>
communication
<input type="radio" value="goods" name="option0"/>
goods
<input type="radio" value="attention" name="option0"/>
attention
</div>

I wrote the function as follows:

$('input:radio').click(function () {
  if (this.checked) { // or $(this).attr('checked')
    alert(this.value); // or alert($(this).val());
  }
});

I found that this doesn't work because $('input:radio') can only work on static input radio elements, not dynamically-created input radio elements by using Jquery.

Of course I can embed the callback code in input radio elements, so it looks as follows:

<div class="below">
    <input type="radio" value="information" name="option0" onclick="myfunction()" />
    information
    <input type="radio" value="communication" name="option0"  onclick="myfunction()" />
    communication
    <input type="radio" value="goods" name="option0" onclick="myfunction()" />
    goods
    <input type="radio" value="attention" name="option0" onclick="myfunction()" />
    attention
    </div>

But I am wondering is there other elegant way to do it instead?

Answer 1

Use the live.
Live will bind a handler to an event (like click) or to a custom event for all current - and future - matched element.

$('input:radio').live('click', function(){
    alert(this.value);
    }
);

Answer 2

You should attach the click event as you create each input node.

// Create the node however you are already doing it
var node = document.createElement("input");
node.setAttribute("type", "radio");
node.setAttribute("name", "option0");
// etc

// And then attach the click event
$(node).click(function () {
    if (this.checked) { // or $(this).attr('checked')
      alert(this.value); // or alert($(this).val());
    }
});

Answer 3

Since the radio elements are created programmatically your selector cannot find them, because they don't exist yet.

You could either, bind the click event when you create the elements as @Justin suggests, or could use live:

$('input:radio').live('click', function () {
  if (this.checked) { // or $(this).attr('checked')
    alert(this.value); // or alert($(this).val());
  }
});

The live function binds an event handler for all current and future matched elements, using event delegation.

It currently supports the following events: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup.