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

小提琴：

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所建议的，改为使用改变事件。

jquery .delegate（）没有开火

2 个答案: