@westdp

Как выполненить скрипт при клике, елси не вешать onclick?

Всем привет, подскажите есть вот такой сайт www.kaaproject.org/download_kaa_test_page, а точнее страничка,
при нажатии на одном из 5 элементов выпадает одна контактная форма, одновременно при клике меняется линк на скачивание и класс, где при нажатии на скачивание файла отправляется событие в Google Analytics.

$('.ova_download').click(function (event) {
        $('.download_kaa_form_link').attr('href', 'http://kaaproject.org/wp-content/download/kaa-sandbox-ubuntu-64bit-v0.7.1.ova');
        $('.wpcf7-submit, .not_registration_link').addClass('track_download_ova');
    });
$(function() {
        $('.track_download_ova').click(function() {
            ga('send', 'event', 'Download', 'Sandbox', 'Sandbox Download 0.7.1');
        });
    });


Из-за того что форма одна а элементов для скачивания много, я меняю класс чтобы отправлялись разные события для каждого скачивания.

Класс меняется но скрипт не понимает, что класс поменялся.
Спасибо за любую помощь.
  • Вопрос задан
  • 448 просмотров
Решения вопроса 1
isqua
@isqua
Научу HTML, CSS, JS, BEM и Git
Этот код работает вот как:
$(function() { // При загрузке документа
  $('.track_download_ova') // Находим элемент с классом track_download_ova
    .click(function() { // Вешаем обработчик клика
      ga('send', 'event', 'Download', 'Sandbox', 'Sandbox Download 0.7.1');
    });
});

При загрузке документа такого элемента ещё нет. Поэтому событие и не срабатывает. Используйте, например, делегирование событий в jQuery, чтобы обработать такую ситуацию.

Альтернативный вариант:
1. Всем кнопкам, которые открывают форму, в вёрстке прописать одинаковый класс и разные дата-атрибуты, например
<button class="open-form" data-type='Sandbox', data-name='Sandbox Download 0.7.1'>Я открываю форму</button>
<button class="open-form" data-type='Debian', data-name='Debian Download 0.7.1'>Я тоже открываю форму</button>

2. При клике на такую кнопку копировать её дата-атрибуты в дата-атрибуты формы:
$('.open-form').click(function (event) {
  var $this = $(this),
      $form = $('.download-form');
  $form.data('name', $this.data('name'));
  $form.data('type', $this.data('type'));
});

3. При клике на кнопку скачивания/ссылку брать данные из атрибутов формы:
$('.wpcf7-submit, .not_registration_link').click(function (event) {
  var $form = $('.download-form');
  ga('send', 'event', 'Download', $form.data('type'), $form.data('name'));
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы