У меня есть таблица со сборщиком данных в каждой строке с динамически генерируемым идентификатором для каждого сборщика данных. В настоящее время у меня есть сценарий, который запускается при изменении даты, но я обнаружил, что он также запускается, когда пользователи используют клавиатуру для редактирования этого поля ввода.
Я мог бы изменить использование события changeDate , но не уверен, как это работает с несколькими сборщиками дат, когда я не могу указать идентификатор для каждого сборщика дат? Другой вариант - запретить пользователям изменять данные напрямую с помощью клавиатуры, но не уверен, возможно ли это?
Вот пример того, как выглядит моя таблица:
$(document).ready(function() { $(".form-control.datepicker").change(function() { alert("starting Date Updated Changes"); //console.log( 'starting Date Updated update' ); });
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.en-AU.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet" /> <script> $('.datepicker').datepicker({ todayHighlight: true, clearBtn: true, autoclose: true }) </script> <table class="table table-condensed table-striped table-bordered"> <tbody> <tr id="70283"> <td>FT523452</td> <td>X234</td> <td>Container Oranges</td> <td>534830</td> <td class="">ZDSFASDF42234</td> <td>Transit</td> <td id="70283"><input type="text" id="70283" class="form-control datepicker" autocomplete="off" placeholder="Date Updated" data-date-format="dd/mm/yyyy" name="dateUpdated"></td> </tr> <tr id="70543"> <td>PB213412</td> <td>Z98787</td> <td>Container Apples</td> <td>535092</td> <td class="">PSDFKS42134</td> <td>Transit</td> <td id="70543"><input type="text" id="70543" class="form-control datepicker" autocomplete="off" placeholder="Date Updated" data-date-format="dd/mm/yyyy" name="dateUpdated"></td> </tr> </tbody> </table>
$(document).ready(function() { $(".datepicker").datepicker(); $(".form-control.datepicker").change(function(e) { console.log(e); alert("starting Date Updated Changes"); //console.log( 'starting Date Updated update' ); }); });