jquery .delegate() not firing

Question

Мне нужно делегировать события в радиогруппу, потому что в конечном итоге я буду динамически добавлять больше, но я не могу получить вторую функцию для запуска на начальных переключателях.

Буду признателен за любую помощь. Я использую jQuery mobile 1.3.1, если это имеет значение.

HTML:

<form id="officeChoice"> 
<fieldset data-role="controlgroup"> 
    <legend>office:</legend> 
    <input type="radio" name="office" id="radio-choice-v-2a" value="on" checked="checked"> 
    <label for="radio-choice-v-2a">One</label> 
    <input type="radio" name="office" id="radio-choice-v-2b" value="off"> 
    <label for="radio-choice-v-2b">Two</label> 
    <input type="radio" name="office" id="radio-choice-v-2c" value="other"> 
    <label for="radio-choice-v-2c">Three</label> 
</fieldset> 

Jquery:

//This Works! 

$('input[name=office]:radio').on('click', function() { 
var $value = $(this).val(); 
alert($value); 
}); 

//This Doesnt 

$('#officeChoice').on('click','input[name=office]:radio', function() { 
    var $value = $(this).val(); 
    alert($value); 
}); 

Fiddle:

http://jsfiddle.net/adam123/9wPc8/10/

Answer 1

Рабочий пример: http://jsfiddle.net/jWzGz/

Заменить click с change и все будет работать как шарм.

$('#officeChoice').on('change','input[name=office]:radio', function() { 
    var $value = $(this).val(); 
    alert($value); 
}); 

Answer 2

Jquery мобильных изменить HTML-рендеринга ed, если вы нажимаете точно на radio button, он работает.

Просто просмотрите полученный HTML-код и посмотрите, что происходит.

<div class="ui-radio"> 
    <input type="radio" name="office" id="radio-choice-v-2b" value="off"> 
    <label for="radio-choice-v-2b" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="radio-on" data-theme="c" data-mini="false" class="ui-radio-on ui-btn ui-btn-hover-c ui-btn-up-c ui-btn-corner-all ui-fullsize ui-btn-icon-left"><span class="ui-btn-inner"><span class="ui-btn-text">Two</span><span class="ui-icon ui-icon-radio-on ui-icon-shadow">&nbsp;</span></span> 
    </label> 
</div> 

Так, как было предложено Gajotres, вместо этого используйте событие изменения.