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

Question

[westdp]

Всем привет, подскажите есть вот такой сайт 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');
        });
    });

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

Класс меняется но скрипт не понимает, что класс поменялся.
Спасибо за любую помощь.

Answer 1

[Alex]

Этот код работает вот как:

$(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'));
});

Comments

[westdp]

У меня на странице есть 13 элеметов которые вызывают контактную форму, в которой есть кнопка скачивания с регистрацией и без, так вот каждый раз когда человек нажимает на определенный тип файла так скажем, скрипт подставляет линку и класс отдельный для кождого выбраного элемента, ну и когда человек наживает на одну из двух кнопок отправляется событие в гугл аналитику, как то так.

[Alex]

westdp: и вам нужно в зависимости от того, по какой кнопке открылась форма, менять какой-то параметр в вызове ga()? А какой?

[westdp]

ga('send', 'event', 'Download', 'Sandbox', 'Sandbox Download 0.7.1');
ga('send', 'event', 'Download', 'Debian', 'Debian Download 0.7.1');
ga('send', 'event', 'Download', 'RPM', 'RPM Download 0.7.1');
ga('send', 'event', 'Download', 'Source', 'Source Download 0.7.1');
ga('send', 'event', 'Download', 'AWS', 'AWS Singapore 0.7.1');,
вот часть из них

[westdp]

а как я смогу менять событие для каждого элемента, можете пример пожалуйста написать?

[Alex]

Обновил ответ.

[Alex]

westdp: вам подошло решение?

[westdp]

isqua Спасибо тебе большое)

[Alex]

westdp: не за что :) Старайтесь придумывать более общие решения, их всегда легче делать и поддерживать.