Question

使用jQuery，我正在动态生成单选按钮，但是对每个按钮执行“click-then-alert”检查，只有第一个单选按钮响应（它是原始的硬编码按钮）。

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

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

也许问题在于我是如何听取点击，使用“这个”或抓住'价值'？

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（scripts / 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() {

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

1 个答案: