jquery-ui DatePicker с событием jquery .on () - PullRequest
Новая
       10

jquery-ui DatePicker с событием jquery .on ()

5 голосов
/ 12 ноября 2011

Я использую asual jquery-адрес, пример вкладок и хочу добавить указатель даты на вкладку «Дополнительно». Если я просто добавляю 

$(document).ready(function() {
    $( "#datepicker" ).datepicker();
});

это не сработает. Итак, я узнал, что должен использовать .live (). Поскольку я использую jquery-1.7 .live () изменил , изменил на .on ().

Если я добавлю этот код, средство выбора даты будет работать только при втором щелчке. 

$(document).ready(function() {
  $(document).on('click', '#datepicker', function () {
    $(this).datepicker();
  });
});

Я видел в другой ветке не рекомендуемый способ заставить его работать так 

$(document).ready(function() {
  $(document).on('click', '#datepicker', function () {
    $(this).datepicker().datepicker( "show" );
  });
});

Как я правильно его использую? Есть ли рекомендуемый способ заставить DatePicker работать так, как я хочу в этом примере?

Я думаю, что мне нужно использовать .on (), потому что я хочу перезагрузить форму, которая включает в себя #datepicker с событием .load ().

Ответы [ 4 ]

6 голосов
/ 12 ноября 2011

Чтобы пройти через три подхода, первый потерпит неудачу, потому что вы настроены таким образом, что #datepicker еще не определено. Вы можете проверить это, заменив его на alert($('#datepicker').length) и убедившись, что оно равно нулю.

Второй подход заключается в двух щелчках, потому что средство выбора даты не знает о первом щелчке, потому что оно было создано после щелчка.

Третий подход работает, потому что он заставляет указатель даты появляться после первого щелчка. Это хорошо, но немного расточительно, потому что после настройки средства выбора даты у него есть собственный прослушиватель событий, который будет отображаться при запуске щелчка.

Возвращаясь к первому подходу, он не работал, потому что #datepicker еще не существовало. Вы можете сделать это, переместив ('#datepicker').datepicker() после точки в коде, где он создан.

Если это невозможно, вы можете сделать так, чтобы ваша функция запускалась только при первом щелчке, используя третий подход, но переключаясь с on на one. Это сделает так, что первый щелчок - это ваш прослушиватель событий, который создает и показывает указатель даты. После этого ваш прослушиватель событий будет удален, и будет существовать только встроенный прослушиватель выбора даты.

Тем не менее, я действительно ненавижу $(document).on('click', ..., потому что он оценивает каждый раз, когда вы нажимаете на страницу. Он фиксирует событие на уровне документа, а затем сравнивает каждый элемент в списке целей с селектором. Это медленно и действительно складывается, если у вас их много. Если вы должны использовать делегированный слушатель, вы должны переместить его к ближайшему родителю. Например, если #datepicker всегда появляется в #form1, вы можете вместо этого сделать $('#form1').on('click', ... и сократить обработку.

1 голос
/ 28 апреля 2014

Попробуйте пример кода ниже: 

$(document).on("focus", "#datepicker", function () {
    $("#datepicker").datepicker();
});
0 голосов
/ 28 апреля 2014

Я бы использовал механизм связывания событий, так как он использует виджет jquery.tab.

, что-то вроде 

$( ".selector" ).tabs({
activate: function( event, ui ) {

    if(window.location.indexOf("#Extra") >= 0)
    {
      $("#datepicker").datepicker();
    }
}
});

Тогда это должно работать.Обратите внимание, что если это не работает, попробуйте связать событие следующим образом 

$(".selector").bind("activate",function(){});

С уважением

0 голосов
/ 12 ноября 2011

Ваше решение превращает поле с идентификатором 'datepicker' в средство выбора даты при нажатии на него. Таким образом, первый щелчок превращает поле ввода в средство выбора даты. Второй щелчок открывает средство выбора даты (и, кстати, снова превращает поле ввода в средство выбора даты, используя jQuery).

Как насчет добавления сценария для создания указателя даты в конец HTML-кода «Дополнительная вкладка» (HTML-код, загружаемый по этой ссылке: http://www.asual.com/jquery/address/samples/tabs/extras.html)?

<!-- This is "Extra" Tab -->
<input id="datepicker">
<script>
    $('#datepicker').datepicker();
</script>
...