Блог

Главная - Вопросы по программированию - поле ввода генерируется при выборе переключателя

поле ввода генерируется при выборе переключателя

#javascript #jquery #html

#javascript #jquery #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>

Комментарии:

1. Я несколько смущен, что это работает, но какой идентификатор $ (‘div#input_id’) вообще отсутствует в разметке?

2. Где это div#input_id ? И как вы добавляете его к каждому div#input_id ? Должно быть только одно?

3. div В id="input_id" вашем HTML нет with . Куда его следует добавить?

4. Извините, ваше объяснение все еще неясно и открыто для многих интерпретаций.

5. я обновил свой вопрос

Ответ №1:

Вы захотите использовать обработчик событий change и проверить все входные данные

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

Ответ №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();
                }

            });
  });

Ответ №3:

Это потому, что вы добавляете обработчик событий для каждого click . Означает, что ваш код выполняется при каждом нажатии на переключатель. вы должны попытаться привязать обработчик событий для первого щелчка.

Я предлагаю вам использовать .one() метод Jquery. Он подключает обработчик событий один раз.

Попробуйте .one() метод jquery.

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

Рабочий пример