JQuery OnClick не работает

Question

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

var section = $('<section></section>').append('<a class="link" href="#"></a>');
section.find('a.link').attr('title', post.data.permalink)
                      .text(post.data.title)
                      .click(function()
                      {
                           console.log("function");
                           alert("hi");
                           getThread(post.data.permalink);
                       });
items.push(section[0].outerHTML);
$('#posts').empty().append(items.join(''));

Answer 1

Одна из самых распространенных ошибок с jQuery. При динамическом добавлении элементов обычные обработчики событий jQuery не работают, поэтому вам нужно использовать .live(), чтобы иметь возможность связывать события с динамическими элементами. Это должно работать:

var section = $('<section></section>').append('<a class="link" href="#"></a>');
section.find('a.link').attr('title', post.data.permalink)
                      .text(post.data.title)
                      .live("click", function()
                      {
                           console.log("function");
                           alert("hi");
                           getThread(post.data.permalink);
                       });
items.push(section[0].outerHTML);
$('#posts').empty().append(items.join(''));

Обратите внимание на использование .live("click", function() { ... }); там? Это должно решить вашу проблему.

Answer 2

Вам не нужно вручную присоединяться к HTML.

Вы связываете событие с элементом, затем берете HTML-код этого элемента и просто объединяете его в строку, которая затем, в свою очередь, вставляется в DOM как новые элементы, когда вы append добавляете к # сообщениям. 1004 *

items здесь не определено, но я собираюсь выйти на конечность и предположить, что это массив сгенерированных <section> s и т. Д.

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

// Push the element, don't stringify it.
items.push(section);

// Then simply append the "items" elements.
$('#posts').empty().append(items);

Конечно, live, вероятно, также решит проблему, но вы, безусловно, можете связать события с сгенерированными элементами, а затем вставить их в DOM. Чего вы не можете сделать, так это связать событие с элементом, затем распечатать его HTML и вставить его в DOM. Любая привязка, которую вы сделали с оригинальным элементом, потеряна.

Answer 3

При запуске этого в IE убедитесь, что инструменты разработчика ( F12 ) присутствуют, в противном случае консоль будет неопределенной, и вызов console.log() вызовет ошибку и остановит выполнение функции. 1004 *

Что еще: externalHTML предназначен только для IE, вам лучше его забыть и никогда не использовать.

Answer 4

Это выглядит хорошо. Вы можете попробовать использовать each () для перебора этой коллекции. Я не уверен, что вы можете связать даже обработчики с такой коллекцией jQuery.

section.find('a.link').each(function(){
    $(this).attr('title', post.data.permalink)
                      .text(post.data.title)
                      .click(function()
                      {
                           console.log("function");
                           alert("hi");
                           getThread(post.data.permalink);
                       });


});