Блог

Главная - Вопросы по программированию - Почему этот обработчик кликов не работает в jQuery?

Почему этот обработчик кликов не работает в jQuery?

#javascript #jquery

#javascript #jquery

Вопрос:

У меня на странице есть следующий код:

 var offer_link = $('<a>').addClass('fc-offer-link');
offer_link.click(function() {
    alert('Hello');
});

offer_link.attr('href', "#"   this.id);
offer_link.append(this.subject);

this.list_item = $('<li>');
this.list_item.append(offer_link);

Но даже при том, что ссылка появляется на странице, обработчик никогда не вызывается. Что происходит?

Комментарии:

1. Пожалуйста , исправьтесь.

2. Вы ждете загрузки документа $(document).ready() перед установкой обработчика щелчков? Или запуск javascript в теле документа в конце документа (не в разделе HEAD)?

3. На что this ссылается? Кроме того, я бы рискнул предположить, что изменение на $(offer_link).live('click',function(){ alert(...); }); может сработать.

4. this это объект, который создается динамически и создает фрагменты HTML, которые вызывающая функция затем захватывает и вставляет в DOM.

5. Как вы добавляете элемент списка? Может быть, вы делаете что-то, что уничтожает элемент DOM и создает его снова? И что this здесь?

Ответ №1:

Проблема оказалась в том, где элемент был вставлен в DOM. Он вставлялся с помощью:

 $('#my_list').html(my_new_list.html())

Он должен был использовать:

 $('#my_list').replaceWith(my_new_list)

Комментарии:

1. Да, когда вы используете html метод, вы в основном сериализуете элементы DOM в строку. Если вы зададите строку HTML, будут созданы новые элементы, отличные от тех, к которым вы привязали обработчики событий.

Ответ №2:

Я думаю, вам просто нужно добавить ссылку на элемент, например:

 <script type="text/javascript">
    $(function(){
        var link = $("<a>Click Me!</a>").addClass("fc-offer-link").appendTo($("#div1"));
        if (link){
            link.click(function(){
                alert("Hey there!");
            });  
        }   
    });
</script>
<div id="div1"></div>

РЕДАКТИРОВАТЬ: не уверен, почему я был отклонен, но вот jsFiddle

Комментарии:

1. @Interstellar_Coder Смотрите ссылку JSFiddle в комментариях к вопросу, нет ничего плохого в привязке обработчика событий до того, как элемент будет введен в документ

2. @Interstellar_Coder: Не имеет значения, привязан ли обработчик до или после добавления ссылки в DOM.