Мой скрипт отлично работает на статическом контенте, но ломается при изменении контента через AJAX - jQuery - PullRequest
Новая
       1

Мой скрипт отлично работает на статическом контенте, но ломается при изменении контента через AJAX - jQuery

1 голос
/ 26 июля 2010

Я пишу пользовательский календарь, который состоит из двух частей: одна часть показывает сетку месяца, а вторая - события на выбранную дату.Сетка календаря текущего месяца загружается автоматически, и отображение ежедневных событий работает правильно.Однако, когда пользователь нажимает кнопку, чтобы просмотреть следующий или предыдущий месяц, нажатие на даты больше не работает.Кроме того, изменение месяца больше не работает в динамически загружаемом календаре.

Это код jQuery, который я использую: 

<script type="text/javascript">
    $(document).ready(

    function() {
        $('div.calendar_events').text('To view the events on any of the highlighted dates, simply click the date.');
        $('div.number').click(

        function(e) {
            e.preventDefault();
            var theDate = $(this).attr('id').split('-');
            $('div.calendar_events').load('ajax/calendar_events.php?month=' + theDate[1] + '&day=' + theDate[2] + '&year=' + theDate[3]);
        });
        $('a.changemonth').click(

        function(e) {
            e.preventDefault();
            var theDate = $(this).attr('id').split('-');
            $('div.calendar').load('ajax/calendar_view.php?month=' + theDate[1] + '&year=' + theDate[2]);
        });
    });
</script>

Ответы [ 2 ]

1 голос
/ 26 июля 2010

Используйте метод jQuery live() вместо click для любого контента, который генерируется динамически, вот пример: 

$('selector').live('click', function(){
   // your code....
});

.live ()

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

0 голосов
/ 26 июля 2010

Не устанавливайте события напрямую, используя click.Вместо этого используйте live. 

$('div.number').live('click', function() { .. });

Когда загружается новый контент AJAX, новый контент заменяет старый, а также уничтожает все обработчики событий, ранее прикрепленные к этому замененному контенту, используя bind или его ярлыки, такие как click, change и т. Д.

С другой стороны, в документ добавляются обработчики живых событий, и из-за пузыря событий в DOM все событияв конечном итоге доходят до документа (который вы никогда не заменяете или в идеале никогда не должны заменять :), так что вы можете думать о document как о безопасном убежище для добавления событий.

Также извлекайте delegate - это еще один способ использовать всплывающее окно событий, особенно если вы помешаны на производительности.

...