Не работает Spinner | jQuery UI

121

20 декабря 2020, 19:40

Есть интернет магазин в корзине заказов отображены все выбранные к покупке товары.

У каждого товара есть input c уникальным ID, для выбора количества.

При подключении Spinner | jQuery UI работает стилизация только у первого товара и только если я в js пропишу его ID

HTML:

<input class="form-control" id="10001" min="1" value="1">

атрибут ID у всех разный!

JS:

$("#10001").spinner();

Вопрос:

Как можно подставлять динамично id в JS чтоб стилизация input работала у всех товаров?

Answer 1

  $( function() { 
    var spinner = $( ".spinner" ).spinner(); 
     
    $("#add").click(function(){ 
      $("body").append('<p><input class="spinner"></p>'); 
      $(".spinner").each(function(){ 
        $(this).spinner(); 
      }); 
    }); 
  } );

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>jQuery UI Spinner - Default functionality</title> 
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
  <link rel="stylesheet" href="/resources/demos/style.css"> 
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
  <script src="/resources/demos/external/jquery-mousewheel/jquery.mousewheel.js"></script> 
</head> 
<body> 
  
<p> 
  <label for="spinner">Select a value:</label> 
  <input class="spinner"> 
</p> 
 
<button id="add">add</button> 
  
  
</body> 
</html>