Блог

Главная - Вопросы по программированию - Проблема с Jquery Проблема с чтением входного значения

Проблема с Jquery Проблема с чтением входного значения

#javascript #html #jquery

#javascript #HTML #jquery ( jquery )

Вопрос:

У меня возникла проблема с получением jquery входных данных, когда я создал новый ввод с помощью jquery

Мне нужно получить значение из ID: 2, но я получаю тест 1 John и из ID 2 test 2 undefined

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="inputs">
  <div class="names" id="1"><input type="text" id="Name"></div>
</div>
</br>
</br>
<a onclick="AnotherInput();">[ ] Input</a>

<button onclick="send();">Send</button>

<div class="data">

</div>


<script>
  var inputs = 1;

  function AnotherInput() {
    inputs  ;
    $('#inputs').append('<div class="input" id="'   inputs   '"><input type="text" id="Name"></div>');
  }


  function send() {

    var max = 0;
    $('.names').each(function() {
      max = Math.max(this.id, max);
    });


    for (var i = 1; i <= max; i  ) {
      $('div#names').each(function() {
        $(".data").append(" test "   i   " "   $(this).find('div#'   i).find('select[id="Name"]').val());
      });
    }

  }
</script>

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

1. </br> * вы имеете в виду <br /> АКА <br>

2. $('div#names') ? где этот элемент?

3. добавить <input type="text" id="Name"> ? У вас не может быть дублированных идентификаторов на одной странице.

4. Используйте <button> , если вам нужна кнопка, а не <a>

5. Не используйте встроенные on* обработчики. JS должен быть только в одном месте, и это script .

Ответ №1:

  • Не используйте идентификаторы для ваших дублирующихся элементов.
  • Не используйте встроенные on* атрибуты обработчиков JS. Так же, как вы, надеюсь, не используете встроенный style атрибут CSS.
  • Чтобы получить количество ваших текущих элементов, вы могли бы использовать .children().length 
 const
  $inputs = $("#inputs"),
  $add = $("#add"),
  $send = $("#send"),
  $data = $("#data");

function add() {
  const n = $inputs.children().length   1;
  $inputs.append(`<div><input type="text" name="name_${n}"></div>`);
}

function send() {
  const data = $inputs.find('[name^="name_"]').get().map(el => el.value);
  $data.append(data.join("<br>"));
}

$add.on("click", add);
$send.on("click", send);
add(); // Init! (Add the first input) 
 <div id="inputs"></div>
<button type="button" id="add">  Add</button>
<button type="button" id="send">amp;rarr; Send</button>
<div id="data"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>