1

Используя jQuery, я динамически создаю элемент. В данном случае пусть это будет ссылка:

createEl: function() {
    if (options.backBtn.enable) {
        var hrefBtn = $('<a/>', {
            class: 'back-link',
            href: '#',
            text: 'Назад'
        });
        $(options.backBtn.element).after(hrefBtn);
        console.log('Just created desctop icon back');
    }
}

Как мне к этой ссылке добавить некое действие на onClick? Например, window.history.back;

3 ответа 3

3

Функция $ сразу же вам вернёт созданный элемент, обёрнутый в jQuery, поэтому можно сразу повесить обработчик:

$('<a />').click(function() {
    console.log('clicked!');
})
0

На вопрос уже ответили, но хочу еще сказать вам про
Делегирование событий: cуть в том, что бы вешать событие не на сам элемент, а на его родителя.

$('.parent').on('click', '.child', function () {
    /* ваш код */
});

Как это работает?

  • Кликаем по элементу .child
  • Вызывается событие click, на нашем child нет обработчика
  • Всплытие - событие начинает всплывать и переходит к элементу parent, который является родителем child, на нем уже есть наш обработчик. В обработчике проверяется, на какой элемент мы кликнули, и если соответствует селектору ( child, первый параметр в ф-ции click), то вызывается обработчик, в контексте child;

Это можно организовать и на чистом js

parent.onclick = function (e) {
    var target = e.target // без кроссбраузерности, только для примера
    /* допустим проверяем по классу */
    if(target.className == 'child') {
        /* тут можно выполнить, что угодно */
    }
}

Можно организовать некую обертку

function delegate(parent, child, event, func) {
    var parent = document.querySelector(parent);
    var childs = document.querySelectorAll(child);
    parent.addEventListener(event, function (e) {
        var target = e.target; // плевать на IE
        if(Array.prototype.indexOf.call(childs, target) < 0)
            return; // не наш элемент
        func.call(e.target); 
        // выполнится в контексте target, можно и параметры передать
    }, false);
}

Зачем?

Теперь, каким бы мыслимым и немыслимым образом вы бы не добавили элемент child в parent, на child будет срабатывать обработчик. Потому что на самом деле он срабатывает на элементе parent :)

1
  • Пожалуй, стоит ещё добавить, что сравнение .className со строкой "child" - не лучшая идея, потому что при наличии у элемента двух классов это будет работать неправильно. Конечно, в вопросе у элемента всего один класс, но для будущих посетителей было бы полезно знать, что правильнее проворачивать такое через .classList.
    – Regent
    8 окт 2015 в 17:43
-1

$('body').on('click','.back-link', function(){console.log('click-click');})

1
  • Речь в вопросе идет о только что созданном элементе, а не о всех элементах класса back-link. 8 окт 2015 в 10:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.