如何识别动态添加的单个单选按钮


How to recognize individual radio buttons if they are added dynamically?

我有两个单选按钮:'是'和'否'。如果我选择"是",将出现一个输入文本框,如果我选择"否",文本框将被隐藏。

问题是单选按钮是通过下拉(数字1-30)动态添加的。

它们目前是这样设置的:

<li>
    <input type="radio" id="yes-sdf-1" name="field[0][sdfradio]" value="Yes" />
    <label for="yes-sdf-1">Yes</label>
    <input type="text" name="field[0][sdf-text]" style="display: none;" />
</li>
<li>
    <input type="radio" id="no-sdf-1" name="field[0][sdfradio]" value="No" checked />
    <label for="no-sdf-1">No</label>
</li>

这是我的jQuery

$(':radio[name="sdfradio"]').change(function() {
    var sdfradio = $(this).filter(':checked').val();
    $('input#sdf-text').hide();
    if( sdfradio == 'Yes'){
        $('input#sdf-text').show();
        $('input#sdf-text').addClass("field required");
    }else if( sdfradio == 'No' ){
        $('input#sdf-text').hide();
    }
});

但是正如你所看到的,这只能在有一个sdfradio的情况下工作。如果我使用像name="field[count_goes_here][sdfradio]"

这样的数组,我如何让它工作?

使用jQuery on() 对动态生成的元素进行事件委托。

也可以使用*= - jQuery 属性-包含选择器

$(document).on('change',':radio[name*="sdfradio"]',function() {
    ....
});

我没有看到ID为sdf-text - $('input#sdf-text')input的参考。

你需要$(':text[name*="sdfradio"]')