无法访问动态创建的单选按钮的值

Question

使用 jQuery，我动态生成单选按钮，但是对每个单选按钮进行“点击然后提醒”检查，只有第一个单选按钮响应（它是原始硬编码的单选按钮）。

在我的实际页面中使用脚本时，所选单选按钮成功传递给服务器（其中任何一个），所以我知道每个动态创建的单选按钮都在获取一个值并传递它。在 Firebug 中，每个元素的结构都与第一个硬编码的元素相同。

动态创建的表单元素是否没有完全嵌入到 DOM 中？

也许问题在于我如何监听点击，使用“this”或抓取“value”？

JSFiddle 上的示例代码：http://jsfiddle.net/2ny6c0hq/8

或者...

HTML：

<script src="scripts/add_radio.js" language="Javascript" type="text/javascript"></script>

<div class="input_fields_wrapper">
    Entry 1 <input class="radio_button" type="radio" name="correct_answer" value="answer_1" />
</div>

<div id="add_field">Add More Fields</div>

JAVASCRIPT（脚本/add_radio.js）：

$(document).ready(function() {

    var max_fields      = 10; //maximum radio allowed
    var wrapper         = $(".input_fields_wrapper"); //Fields wrapper
    var add_button      = $("#add_field"); //Add button ID

    var x = 1; // initial radio count
    $(add_button).click(function(e){ // on add input button click
        e.preventDefault();
        if(x < max_fields){
            x++; // increment counter
            $(wrapper).append("<br />Entry " + x + " <input type='radio' class='radio_button' name='correct_answer' value='answer_" + x + "'>");
        }
    });

    $(".radio_button").on("click", function(){
        alert($(this).val());
    });

});

Answer 1

您需要对动态内容处理程序使用事件委托：

$(".input_fields_wrapper").on("click", ".radio_button", function() {