Question

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

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

问题：当我单击单选按钮一次时，为什么输入框生成的数量超过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

您将需要使用事件处理程序change并检查所有输入

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

Answer 2

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

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

            });
  });

Answer 3

这是因为您要为每个click添加事件处理程序。表示每次单击单选按钮都会执行代码。您必须尝试绑定事件处理程序以进行第一次单击。

我建议你使用Jquery .one()方法。它将事件处理程序附加一次。

尝试使用jquery .one()方法。

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

Working Example

输入框生成单选按钮选择

3 个答案: