Вызов функции jquery происходит на странице один раз для первого индификатора, как сделать для каждого?

210

25 марта 2018, 20:17

Есть следующая конструкция, при клике в первое поле создается маска для ввода телефона, ее создает подключенный скрипт jquery.maskedinput.min.js по индификатору #phone При клике во второе идентичное поле, маска не создается, думаю это из за того что я неправильно указал вызов функции, помогите исправить.

$(document).ready(function() { 
  $("#phone").mask("+7(999) 999-9999"); 
});

.form { 
  margin: 10px 0px; 
} 
 
.form input { 
  height: 36px; 
  padding: 0px 10px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script> 
 
<div class="form"><input type="text"  placeholder="Телефон"  id="phone" ></div> 
<div class="form"><input type="text"  placeholder="Телефон"  id="phone" ></div>

Answer 1

В Вашем html присутствуют элементы с одинаковыми id="phone". Выборка по id (так как ожидает уникальности этого свойства) находит только один из них - первый. Используйте class:

$(document).ready(function() { 
  $(".phone").mask("+7(999) 999-9999"); 
});

.form { 
  margin: 10px 0px; 
} 
 
.form input { 
  height: 36px; 
  padding: 0px 10px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script> 
 
<div class="form"><input type="text"  placeholder="Телефон"  class="phone" ></div> 
<div class="form"><input type="text"  placeholder="Телефон"  class="phone" ></div>