Почему не работает javascript код для плагина wordpress?

218

13 апреля 2018, 13:21

Добрый день!

На сайте нужно сделать плагин расписания занятий фитнес.

fitness.ad-rocket.com.ua/schedule

Я нашел подходящий мне плагин, кроме одного момента. Фильтра в плагине реализован в виде checkbox, а я хотел сделать radio.

Полез в код поменял на радио но не сработало

Отображения расписания осталось такое же как и с функционалом checkbox, то есть можно было кликнуть на все категории фильтра и они все стали бы активными, но при этом сами название фильтров работали как с функционалом Radio при выборе одного остальные снимались, но это только внешне так как контент отображался как при как при выбранных всех фильтрах.

Дальше возникла идея через javascript снимать все checkbox кроме выбранного

$('.wcs-filter').on('click', function(){
    $('.wcs-filter').not(this).prop('checked', false);
});

Но опять не получилось он просто не работает. Хотя я не понимаю из за чего. Ведь он просто работает с html. Когда я использую его вне плагина все работает. https://codepen.io/chaly7500/pen/WzgVNW

Возможно он вступает в конфликт с другим javascript либо есть какая то ошибка.

Так вот вопрос, Возможно ли посмотреть через инструменты разработчика либо через другой сервис, из за чего он не применяется когда я использую плагин?

Answer 1

Открываем dev tools. Смотрим Elements. Находим .wcs-filter. Смотрим справа Event Listeners. Видим, что на click висят только скрипты bootstrap. Ясно, что на click ваши элементы не реагируют. Почему?

А потому что вы запускаете скрипт в теле страницы довольно странным образом

<script type="text/x-template" id="wcs_templates_filter--checkbox">
  <label class='wcs-filters__filter-wrapper' :class="level == 1 ? 'wcs-filters__filter-wrapper--padded' : ''">
    <input v-bind:value="value" v-on:change="updateModelValue" :id='unique_id + "-filter-" + slug' type='checkbox' class='wcs-filter' :name='name' :value='slug'> <span v-html="title"></span>
  </label>
  $('.wcs-filter').on('click', function(){
  $('.wcs-filter').not(this).prop('checked', false);
  });
</script>

Как только я выкинул из этого скрипта html-код и выполнил его в консоли, клики на кнопках стали работать задуманным образом.