Ошибка: select () не является функцией - JQuery

Question

Я пытаюсь скопировать в буфер обмена значения внутри полей ввода. Код для получения этих значений работает нормально, когда я нажимаю на кнопку «копировать», а функция alert () выполняет небольшую отладку, я вижу правильное значение внутри ... но когда я пытаюсь принять это значениескопировать в буфер обмена, появляется ошибкаЯ видел множество примеров в Интернете, но только для элемента ... Итак, это мой код, который показывает правильное значение, но не работает для копии.

$(document).ready(function() {
  $('div#screen_wrap').each(function() {
    var elem = $(this);
    $("#copycoords", elem).click(function() {
      var coords = $("#coords", elem).val();
      coords.select(); // This line is the error
      document.execCommand("copy", false);
      alert(coords);
    });
  });
});

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

<div id="screen_wrap" class="glass">
  <div><img src="img.jpg" /></div>
  <p>Country 1</p>
  <input type="text" value="47.529016,19.050963" id="coords" />
  <input type="button" value="Copia" id="copycoords" class="btn1" />
</div>

<div id="screen_wrap" class="glass">
  <div><img src="img.jpg" /></div>
  <p>Country 2</p>
  <input type="text" value="41.662055,-0.894292" id="coords" />
  <input type="button" value="Copia" id="copycoords" class="btn1" />
</div>

<div id="screen_wrap" class="glass">
  <div><img src="img.jpg" /></div>
  <p>Country 3</p>
  <input type="text" value="38.461808,27.217074" id="coords" />
  <input type="button" value="Copia" id="copycoords" class="btn1" />

Answer 1

Вы используете функцию select для значения элемента - $("#coords", elem).val();, вам нужно просто вызвать его для самого элемента - $("#coords", elem).select()

Кстати. $("#coords", elem) не требуется, вы не должны использовать один и тот же идентификатор в любом месте страницы, так как идентификаторы должны быть уникальными, поэтому $("#coords") должно быть достаточно

Answer 2

Во-первых, ваш атрибут id должен быть уникальным для всех элементов dom. Во-вторых, select() должен быть на элементе dom. Вы можете изменить код, как показано ниже.

$('input[type="button"]').click(function() {
  $(this).parent().find('input[type="text"]').select();
  document.execCommand("copy", false);
});

input {
  outline: none;
}

input::selection {
  color: initial;
}

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

<div class="glass">
  <div><img src="img.jpg" /></div>
  <p>Country 1</p>
  <input type="text" value="47.529016,19.050963" />
  <input type="button" value="Copia" class="btn1" />
</div>

<div class="glass">
  <div><img src="img.jpg" /></div>
  <p>Country 2</p>
  <input type="text" value="41.662055,-0.894292" />
  <input type="button" value="Copia" class="btn1" />
</div>

<div class="glass">
  <div><img src="img.jpg" /></div>
  <p>Country 3</p>
  <input type="text" value="38.461808,27.217074" />
  <input type="button" value="Copia" class="btn1" />
</div>