jquery - jquery .delegate() 没有触发

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>

查询：

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

小提琴：

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 mobile 更改呈现的 html，如果您准确单击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 所建议的，请改用更改事件。