Почему клик не срабатывает больше одного раза?

Question

[Кирилл Вольф]

Функция на клике по a.ui-state-default срабатывает только раз. Не могу понять, почему

$(document).ready(function () {
    $( "#datepicker" ).datepicker({
        altField: ".date_picker input",
        firstDay: 1,
        altFormat: "dd-mm-yy",
        dayNames: [ "Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота" ],
        dayNamesMin: [ "Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб" ],
        monthNames: [ "Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь" ]
    });
    $('.ui-datepicker td ').on('click', '.ui-state-default', function () {
        alert();
        $('.time_picker .time_item').removeClass('busy');
        $.getJSON('/data.json', function(data) {
            $.each(data, function (key, val) {
                if (val.date == $('.date_picker input').val()) {
                    $('.time_picker p span').each(function () {
                        if ($(this).text() == val.time) {
                            if ($(this).hasClass('active_time_item')) {
                                $(this).removeClass('active_time_item');
                                alert("Выбранное время занято!");
                            }
                            $(this).addClass('busy');
                        }
                    });
                }
            });
        });
    });

Comments

[Евгений Петров]

Что значит — не срабатывает?
Что в консоли (включая сеть)?
Где структура кода, из которой было бы понятно, где происходит клик, а где замена?
Повтор уберите Почему клик не срабатывает больше одного раза?

[Роман Скрябин]

Попробуй так $('html ').on('click', '.ui-state-default', function ()

[Евгений Петров]

Роман: Логичнее использовать $(document), не находите?)

[Роман Скрябин]

Евгений Петров: Вы правы, но привычка берет свое)

[Кирилл Вольф]

Евгений Петров: 1) функция, повешенная на а.ui-state-default не отрабатывает больше одного раза.
2) в консоли чисто, ошибок нет
3) клик по а.ui-state-default из jquery ui datepicker. Если ставить клик на другой селектор - все отлично отрабатывает

[Кирилл Вольф]

Роман: $('html *').on('click', '.ui-state-default', function () - работает, но опять же только один раз

Answer 1

[Евгений Петров]

Во-первых, прислушайтесь к совету, что дал Роман, и сделайте так:

$(document).on('click', '.ui-datepicker .ui-state-default', function () {...});

Во-вторых, если после первого раза перестаёт срабатывать, то нужно смотреть на элемент .ui-state-default в консоли и наблюдать, что с ним происходит после клика. Мне кажется, вполне очевидно, что такого класса больше нет.

Update
Если в найденных ячейках событие срабатывает 1 раз, а попытка поймать его в document не венчается успехом, какой вывод следует?
Очевидно, что:
— после выбора даты таблица перерисовывается полностью
— всплытие события принудительно останавливают где-то в пределах элемента с инициализацией календаря

Как поступить в таком случае?

1. Можно вспомнить про первую фазу распространения события и написать примерно такое для борьбы с любителями preventDefault

document.addEventListener('click', function (e) {
	var target = $(e.target).closest('.ui-state-default');

	if (target.length) {
		...
	}
}, true);

2. А можно (и это правильный способ), почитать API того плагина, что вы используете, и найти там вот такую штуку:

$('#datepicker').datepicker({
	onSelect: function () {
		...
	}
});

Comments

[Кирилл Вольф]

Евгений Петров: в том-то и дело, что элементов с классом 29, а по клику на конкретный элемент к нему только добавляется класс

[Евгений Петров]

Кирилл: Тогда проверьте, куда пропадает класс ui-datepicker у одного из родителей элемента с классом ui-state-default.

[Евгений Петров]

Или просто напишите

$(document).on('click', '.ui-state-default', function () {...});

[Кирилл Вольф]

Евгений Петров: так функция даже раз не выполняется

[Евгений Петров]

Обновил ответ

[Кирилл Вольф]

Евгений Петров: благодарю за помощь, решил тем, что удалил data-event='click' у всех td .ui-state-default и сделал $(document).on('click', '.ui-state-default', function () {...}); как вы и советовали

Answer 2

[Кирилл Вольф]

Евгений Петров:
клик по одному из нескольких одинаковых элементов

<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2015"><a class="ui-state-default" href="#">20</a></td>