Я хочу, чтобы функция срабатывала всякий раз, когда проверяется один из элементов радиоэлемента. Радиоэлементы динамически создаются с помощью jQuery

Question

Я хочу разместить функцию на входных радиоэлементах. Эти входные радиоэлементы создаются динамически, используя jQuery. Один из динамически созданных (щелчка пользователя) элемент ввода выглядит следующим образом:

<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> 

Я написал функцию следующим образом:

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

Я обнаружил, что это не работает, потому что $('input:radio') может только работа на статических входных радиоэлементах, а не динамически созданных входных радиоэлементов с помощью jQuery.

Конечно, я могу встроить код обратного вызова во входные радиоэлементы, поэтому он выглядит следующим образом.

<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> 

Есть ли другой элегантный способ сделать это вместо этого?

Answer 1

Поскольку radio элементы создаются программно ваш селектор не может найти их, потому что они еще не существуют.

Вы можете либо, связать click событие, когда вы создаете элементы, как @Justin предлагает, или можно использовать live:

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

live функция связывает обработчик события для всех текущих и будущих совпавших элементов, используя event delegation.

В настоящее время она поддерживает следующие события: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup.

Answer 2

Используйте live.
Live привяжет обработчик к событию (например, клику) или к настраиваемому событию для всех элементов текущего и будущего соответствия.

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

Answer 3

Необходимо прикрепить событие click при создании каждого входного узла.

// 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()); 
    } 
});