Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
svisch
1 / 1 / 2
Регистрация: 26.10.2015
Сообщений: 26
1

Скрипт перестает работать после применения фильтра в форме

12.10.2017, 15:08. Просмотров 194. Ответов 13
Метки нет (Все метки)

Добрый день, форумчане. В javascript очень слаб, так что сильно не пинайте, если буду называть что-то не своими именами)
Столкнулся с такой проблемкой. На сайте Имеется расписание мероприятий, при клике по каждому из которых открывается подробное описание. Это реализовано скриптом, который приведу ниже. У этого расписания есть фильтр по дням, который заключен в форму. Проблема в том, при начальной загрузке страницы скрипт работает, но после того, как нажимаешь на фильтр дней, то он перестает работать! Заранее спасибо за помощь.

Javascript
1
2
3
$('.raspisanie').click(function() {
        $(this).find('.raspisanie-slide').toggleClass('opened');
    });
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.10.2017, 15:08
Ответы с готовыми решениями:

Почему при перестановке скрипт перестает работать?
кто может объяснить почему вот так работает : function getOrderInfoByid(...

После unwrap/wrap перестает работать resize
Имеется checkbox, который обернут в div с рамкой (см. рис. внизу). Ширина этого...

Css перестает работать после выполнения функции
Здравствуйте. Встала у меня такая проблемка. Есть у меня такой кусочек css...

Перестает работать метод css после загрузки документа
Здравствуйте, коллеги. Помогите, пожалуйста, разобраться почему перестает...

Перестает работать код после добавления события onclick
Здравствуйте, помогите, пожалуйста. Есть код: $(document).ready(function() {...

13
2849141
109 / 86 / 67
Регистрация: 06.10.2015
Сообщений: 223
12.10.2017, 16:41 2
svisch, покажите html и js коды. Этого мало.
0
svisch
1 / 1 / 2
Регистрация: 26.10.2015
Сообщений: 26
12.10.2017, 16:49  [ТС] 3
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<form class="views-exposed-form bef-exposed-form" data-bef-auto-submit-full-form="" data-drupal-selector="views-exposed-form-raspisanie-block-1" action="/node/6" method="get" id="views-exposed-form-raspisanie-block-1" accept-charset="UTF-8">
  <fieldset data-drupal-selector="edit-field-date-value" id="edit-field-date-value--wrapper" class="fieldgroup form-composite js-form-item form-item js-form-wrapper form-wrapper">
      <legend>
    <span class="fieldset-legend"></span>
  </legend>
  <div class="fieldset-wrapper">
            <div id="edit-field-date-value"><div data-drupal-selector="edit-field-date-value" id="edit-field-date-value--wrapper" class="fieldgroup form-composite form-radios">
                  <div class="js-form-item form-item js-form-type-radio form-item-field-date-value js-form-item-field-date-value">
        <input data-drupal-selector="edit-field-date-value-1" type="radio" id="edit-field-date-value-1" name="field_date_value" value="1" checked="checked" class="form-radio" />
 
        <label for="edit-field-date-value-1" class="option">1 декабря</label>
      </div>
 
                    <div class="js-form-item form-item js-form-type-radio form-item-field-date-value js-form-item-field-date-value">
        <input data-drupal-selector="edit-field-date-value-2" type="radio" id="edit-field-date-value-2" name="field_date_value" value="2" class="form-radio" />
 
        <label for="edit-field-date-value-2" class="option">2 декабря</label>
      </div>
 
                    <div class="js-form-item form-item js-form-type-radio form-item-field-date-value js-form-item-field-date-value">
        <input data-drupal-selector="edit-field-date-value-3" type="radio" id="edit-field-date-value-3" name="field_date_value" value="3" class="form-radio" />
 
        <label for="edit-field-date-value-3" class="option">3 декабря</label>
      </div>
 
      </div>
</div>
 
          </div>
</fieldset>
<div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions"><input data-bef-auto-submit-click="" class="js-hide button js-form-submit form-submit" data-drupal-selector="edit-submit-raspisanie" type="submit" id="edit-submit-raspisanie" value="Apply" />
</div>
 
</form>
 
 
      <div class="raspisanie views-row">
    <div class="views-field views-field-title"><span class="field-content time">10:00</span></div><div class="views-field views-field-field-info"><div class="field-content raspisanie-info">Факторы, влияющие на развитие рынка органической продукции и внедрение технологии в регионах России</div></div><div class="views-field views-field-body"><div class="field-content raspisanie-slide"><p>Факторы, влияющие на развитие рынка органической<br />
продукции и внедрение технологии в регионах России</p></div></div>
  </div>
    <div class="raspisanie views-row">
    <div class="views-field views-field-title"><span class="field-content time">12:00</span></div><div class="views-field views-field-field-info"><div class="field-content raspisanie-info">Стандарт производства органической продукции</div></div><div class="views-field views-field-body"><div class="field-content raspisanie-slide"><p>«Стандарт производства органической продукции»</p></div></div>
  </div>
    <div class="raspisanie views-row">
    <div class="views-field views-field-title"><span class="field-content time">14:00</span></div><div class="views-field views-field-field-info"><div class="field-content raspisanie-info">Технология производства органической продукции, основные критерии и требования</div></div><div class="views-field views-field-body"><div class="field-content raspisanie-slide"><p>«Технология производства органической продукции, основные критерии и требования»</p></div></div>
  </div>
Добавлено через 2 минуты
И код css
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.raspisanie {
    margin: 40px 0;
    display:block;
    -webkit-animation-delay: 0.80s;
    animation-delay: 0.80s;
    }
.time {
    float:left;
    margin-right: 10px;
    background: #8ac651 url(../../images/clock.png) no-repeat left center;
    padding: 15px 15px 15px 50px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.13);
    font-weight:bold;}
.raspisanie .views-field-field-info {
    width: 100%;
    display:inline;}
.raspisanie-info {
    width: 100%;
    /*display: flex;*/
    padding: 15px 5px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.13);
    cursor: pointer;
    }
}
.raspisanie-slide{
    padding: 17px 30px;
    border: 1px solid #f8d118;
    border-top: 0;
    display: none;}
.raspisanie-slide.opened {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
Добавлено через 1 минуту
js было вверху первым сообщением
0
j2FunOnly
Модератор
860 / 817 / 482
Регистрация: 05.06.2015
Сообщений: 1,897
12.10.2017, 16:53 4
svisch, вопрос в том, как работает ваш фильтр? Вполне вероятно подгружает данные с сервера? А обработчик клика на .raspisanie не навешивается. Возможно у вас такая же проблема Почему не срабатывает .hasClass?
0
2849141
109 / 86 / 67
Регистрация: 06.10.2015
Сообщений: 223
12.10.2017, 17:08 5
svisch, покажите код обработчика формы

HTML5
1
action="/node/6"
0
svisch
1 / 1 / 2
Регистрация: 26.10.2015
Сообщений: 26
12.10.2017, 19:46  [ТС] 6
node/6 - это адрес заглавной страницы сайта
Обработчик реализован модулем views на drupal. Да он подгружает материал из бд
Могу привести пример из php файла модуля, который вероятно и является обработчиком.

Добавлено через 38 минут
Посмотрел, как меняется html после нажатия на кнопки фильтра:
HTML5
1
action="/node/6"
меняется на
HTML5
1
action='/views/ajax'
Может поэтому не работает?
0
2849141
109 / 86 / 67
Регистрация: 06.10.2015
Сообщений: 223
12.10.2017, 20:05 7
svisch, при нажатии Apply загружается index страница в каталоге /node/6
Посмотрите вешается ли на этой странице обработчик клика по .raspisanie
0
svisch
1 / 1 / 2
Регистрация: 26.10.2015
Сообщений: 26
12.10.2017, 20:52  [ТС] 8
2849141, в моем случае site.ru и site.ru/node/6 это одно и тоже. Если изначально загрузить второй вариант, то все работает, также до применения фильтра.
Посмотрите вешается ли на этой странице обработчик клика по .raspisanie
Если вы имеете ввиду подключается ли js файл с обработчиком, то да, т.к. другие скрипты с этого же файла выполняются, а данный нет. Если имели ввиду что-то другое, то пожалуйста поясните.
0
2849141
109 / 86 / 67
Регистрация: 06.10.2015
Сообщений: 223
13.10.2017, 02:53 9
svisch, а полностью эту страницу с php кодом можно? Просто интересно как у вас работает фильтр.
0
svisch
1 / 1 / 2
Регистрация: 26.10.2015
Сообщений: 26
13.10.2017, 13:05  [ТС] 10
2849141, фильтруется контент средствами cms и я точно не уверен где именно код этот искать.
Но у меня есть определенные подвижки в решении этого вопроса. На форуме cms мне подсказали, что это происходит из за того, что фильтруется с ajax подгрузкой, вот из за этого и не срабатывал скрипт после того, как по клику на кнопку подгружались новые данные. Для решения этой проблемы надо привести скрипт к стандартам cms drupal обернув скрипт в обертку.
Небольшая инфа об этом тут http://drupalbook.ru/comment/4652

Я обернул, и вроде бы проблема ушла, но при клику на пункт расписания, открывается не один пункт, а все. Видимо что то не так делаю в самом jquery
Javascript
1
2
3
4
5
6
7
 Drupal.behaviors.mymodule = {
    attach: function (context, settings) {
    $('.raspisanie').click(function() {
         $(context).find('.raspisanie-slide').toggleClass('opened');
    });
    }
  };
0
2849141
109 / 86 / 67
Регистрация: 06.10.2015
Сообщений: 223
13.10.2017, 14:57 11
svisch, может вместо $(context).find → $(this).find?
А вообще думаю правильно посоветовал j2FunOnly, раз у Вас аяксом грузится, то просто

Javascript
1
2
3
$('body').on('click', '.raspisanie', function() {
    $(this).find('.raspisanie-slide').toggleClass('opened');
});
1
svisch
1 / 1 / 2
Регистрация: 26.10.2015
Сообщений: 26
13.10.2017, 15:06  [ТС] 12
2849141, заработал скрипт. Спасибо огромное)
Javascript
1
2
3
$('body').on('click', '.raspisanie', function() {
    $(this).find('.raspisanie-slide').toggleClass('opened');
});
А не могли бы вы мне в двух словах объяснить, почему этот заработал, а прошлый нет
Javascript
1
2
3
$('.raspisanie').click(function() {
        $(this).find('.raspisanie-slide').toggleClass('opened');
    });]
Хотелось бы докопаться до сути)
0
2849141
109 / 86 / 67
Регистрация: 06.10.2015
Сообщений: 223
13.10.2017, 16:04 13
svisch, Вы загружаете аяксом новые блоки .raspisanie, и к ним не
прикрепляется обработчик, так как это уже другие объекты, хоть и с такой же разметкой.
.on() позволяет вешать обработчики на неизменяемые элементы.
Делегированная и прямая обработка событий
0
svisch
1 / 1 / 2
Регистрация: 26.10.2015
Сообщений: 26
13.10.2017, 16:34  [ТС] 14
2849141, спасибо за ссылку и помощь. Почитаю вникну подетальнее)
0
13.10.2017, 16:34
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
13.10.2017, 16:34

Почему после метода click перестает работать функция $(window).scroll(function(){.})
Здравствуйте! Почему после метода click(нажатие на ссылку) перестает работать...

После переноса домена перестал работать скрипт
На странице есть скрипт, который добавляет &quot;да&quot; и &quot;нет&quot; к комментариям После...

Перестает работать setInterval
setInterval(function(){ $(&quot;.image1&quot;).attr({&quot;src&quot;: &quot;images/&quot; + i + &quot;.png&quot;});...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
14
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru