Проблемы с jQuery

Главные вкладки

Аватар пользователя tonk2012 tonk2012 5 сентября 2013 в 7:50

Всем привет. Я новичок в вебразработке, сейчас пишу первый свой сайт и столкнулся с одной проблемой. Использую jQuery в нескольких местах на сайте. Но когда происходить какое-то действие на сайте, допустим просмотр фотки через colorbox или подгрузка материала через "показать еще", то элементы, которые уже были до этого на странице перестают работать как надо.

Выложил сайт на временный хостинг - http://fr40739.tw1.ru. К примеру, сверху на сайте сделал кнопку, при нажатии которой выезжает блок с контактами. Она работает, но стоит посмотреть один сертификат через colorbox на странице http://fr40739.tw1.ru/about, после чего кнопка разворачивает блок с контактами и сворачивает его сразу.

Вряд ли я хорошо объяснил, но можете зайти на сайт и сами посмотреть. Сам скрипт ниже. Как я понимаю проблема с Drupal.behaviors, но я в этом не особо разбираюсь. Помогите, если не сложно, буду благодарен.

(function ($) {
Drupal.behaviors.infiniteScrollAddClass = {
attach: function (context, settings) {

$('#contacts_slider_call').click(function() {
$('#contacts_slider').slideToggle('fast');
return false;
});

$('.questions_click').click(function() {
$(this).parent().parent().children('.views-field-body').children('.questions_click_content').slideToggle('slow');
return false;
});

$('#reviews_slider_content').cycle({
fx: 'scrollHorz',
prev: '#reviews_slider_left_arrow',
next: '#reviews_slider_right_arrow',
timeout: 0
});

$('#certificates_content_all').cycle({
fx: 'scrollHorz',
prev: '#certificates_slider_left_arrow_all',
next: '#certificates_slider_right_arrow_all',
timeout: 0
});

$('#certificates_content_audit').cycle({
fx: 'scrollHorz',
prev: '#certificates_slider_left_arrow_audit',
next: '#certificates_slider_right_arrow_audit',
timeout: 0
});

$('#certificates_content_avtom').cycle({
fx: 'scrollHorz',
prev: '#certificates_slider_left_arrow_avtom',
next: '#certificates_slider_right_arrow_avtom',
timeout: 0
});
}
};
})(jQuery);

Комментарии

Аватар пользователя serega111 serega111 5 сентября 2013 в 10:20

При каждой загрузке данных на страницу через ajax, друпал вызывает все behaviors, чтобы новый контент был обработан правильно. В вашем случае при повторном вызове behaviors, на все элементы вешается по еще одной копии обработчиков событий, поэтому так все и происходит. Чтобы этого избежать, делают так

// ...
$('my-selector').not('.processed').click(function(){
  // some code
});
$('my-selector').addClass('.processed');
// ...

Посмотрите пример в том же colorbox

Аватар пользователя tonk2012 tonk2012 5 сентября 2013 в 18:21

serega111 wrote:
При каждой загрузке данных на страницу через ajax, друпал вызывает все behaviors, чтобы новый контент был обработан правильно. В вашем случае при повторном вызове behaviors, на все элементы вешается по еще одной копии обработчиков событий, поэтому так все и происходит. Чтобы этого избежать, делают так

// ...
$('my-selector').not('.processed').click(function(){
  // some code
});
$('my-selector').addClass('.processed');
// ...

Посмотрите пример в том же colorbox

О, спасибо большое, теперь все работает.

Только когда класс добавляете перед названием точку ставить не надо Wink

Аватар пользователя serega111 serega111 5 сентября 2013 в 20:26

"tonk2012" wrote:
Только когда класс добавляете перед названием точку ставить не надо ;)

Опечатка, я об этом знаю Smile