Использование datepicker в динамическом вводе

Question

У меня есть сетка с столбцом «Полученная дата». Этот столбец представляет собой динамическое поле ввода, которое должно активировать сценарий datepicker из jquery, когда пользователь нажимает на него и поэтому выбирает нужную дату.

я есть это следующий PHP код, который генерирует динамический ID:

$sql="SELECT id, firstname, lastname FROM customers ORDER BY firstname"; 
$sql=$mysqli->query($sql); 
while($row=mysqli_fetch_array($sql)){ 

    $id = $row['id']; 
    $firstname = $row['firstname']; 
    $lastname = $row['lastname']; 

    $output .='<tr id='.$id.'>'; 
    $output .='<td>'.$firstname.'</td>'; 
    $output .='<td>'.$lastname.'</td>'; 
    $output .='<td><input type="text" name="received" id="received" value=""/></td>'; 
    $output .='</tr>'; 

} 

echo $output; 

Тогда у меня есть JQuery скрипт, который вызывает DatePicker для «получил» объект:

<script> 
    $(function() { 
     $("#received").datepicker(); 
    }); 
</script> 

Он работает хорошо но только для ввода в первой строке сетки. Другие не отображают сценарий datepicker.

Кто-нибудь знает какое-либо решение? Заранее спасибо.

Answer 1

У вас есть дублированный идентификатор в вашем html. (datepicker применяются только к первому входу с идентификатором received)

Изменения id="received" к class="received", а затем использовать селектор класса будет исправить вашу проблему.

$(function() { 
    $(".received").datepicker(); 
}); 

Answer 2

Все они имеют одинаковый идентификатор. Попробуйте изменить его на:

$output .='<td><input type="text" name="received" class="received" value=""/></td>'; 

<script> 
    $(function() { 
     $(".received").datepicker(); 
    }); 
</script>