单击单选按钮一次，但输入框生成超过1

Question

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

使用选择框我生成一个单选按钮html，然后从单选按钮， 我试图在选择每个最后一个单选按钮时只生成一个输入框。

问题：当我单击单选按钮一次时，为什么输入框生成的数量超过1。

jsfiddle ：http://jsfiddle.net/4A4FY/

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' />");
    });

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> 

Answer 1

这是一种预期的行为，因为您要将元素附加到目标元素中，

尝试在此上下文中使用.html()来完成您的任务..

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

DEMO

如果已经附加了输入，则编写一个条件来阻止代码流，

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

DEMO

Answer 2

Demo

使用.one('click..') - （ reference ）仅添加一次。

$("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' />"); 
});

旁注：如果您在<option>上点击两次，则会生成重复的ID