Javascript 选择单选按钮时生成输入框

我正在生成一个带有单选按钮选择的动态输入框。 我正在做，但问题就在那里

我试图在每个单选按钮上只生成一个输入框

问题：当我点击一次单选按钮时，为什么输入框会生成超过1个

jsfiddle：

Jquery

  $("input[data-target='generateInput']").on('click', function (e) {
        var targetId = $(this).parent("div").attr("id");
        var t = $("div#input_" + targetId).append("<input type='text' name='aa' />");
    });

$（“输入[data target='generateInput']）。在（'click'，函数（e）上）{
var targetId=$（this.parent（“div”）.attr（“id”）；
var t=$（“div#input"+targetId）.append（“”）；
});

HTML

    <select id="e1" name='selectTag' multiple>
     <option value="ABC" data-id='1' id='1'>ABC</option>
     <option value="DEF" data-id='2' id='2'>DEF</option>
     <option value="GHI" data-id='3' id='3'>GHI</option>
     <option value="JKL" data-id='4' id='4'>JKL</option>
     <option value="MNO" data-id='5' id='5'>MNO</option>
   </select>
   <div id='generate' style='margin:10px;'></div>

基础知识
DEF
GHI
JKL
MNO

您需要使用事件处理程序

更改

并检查所有输入

$('input').on('change', function(){
    if($(this).is(':checked') && $(this).data('i') == 3){
        //do stuff
    }
});

---

您可以检查所选单选按钮的值

$( document ).ready(function() {
            $("input[name='radioBtn_4']").on('click', function(e) {
                if($(e.currentTarget).val()==="Radio 3")   {
                    var t = $('div#4').append("<input type='text' name='aa' />"); 
                } else{
                    $("input[name='aa']").remove();
                }

            });
  });

$（文档）.ready（函数（）{
$（“输入[name='radioBtn_4']”）。在（'click'，函数（e）上{
如果（$（e.currentTarget）.val（）=“无线电3”）{
var t=$（'div#4'）。追加（“”）；
}否则{
$（“输入[name='aa']”）。删除（）；
}
});
});

这是因为您正在为每个

单击添加事件处理程序。意味着每次单击单选按钮都会执行代码。必须尝试为首次单击绑定事件处理程序

我建议您使用Jquery
.one（）
方法。只需将事件处理程序附加一次

尝试jquery方法

$（“输入[data target='generateInput']）。一个（'click'，函数（e）{
var targetId=$（this.parent（“div”）.attr（“id”）；
console.log（“#input#”+targetId）；
var t=$（“div#input"+targetId）.append（“”）；
});

我有点困惑，这确实有效，但标记中根本没有的id$（'div#input(u id'）是什么？div#input(u id

在哪里？您如何将其附加到每个

div#input_id

？应该只有一个？HTML中没有带有

id=“input\u id”

的

div

。应该附加在哪里？很抱歉，您的解释仍然不清楚，可能会有很多解释。我已经更新了我的问题

$("input[data-target='generateInput']").one('click', function(e) {
     var targetId= $(this).parent("div").attr("id");
     console.log("#input_"+targetId);
     var t = $("div#input_"+targetId).append("<input type='text' name='aa' />"); 
});