Обработать событие click для добавленных элементов в jQuery

Я создал несколько элементов на моей странице, используя следующий метод. Например,

$("#button"+caption).click(function(){
        var firstDisplay = '<div id="firstDisp'+caption+'"><ul>';
        for(var i=0;i<parents.length;i++){
            firstDisplay=firstDisplay+'<li class="fClick">'+parents[i]+'</li>';
        }
        firstDisplay=firstDisplay+'</ul></div>';
        $(firstDisplay).dialog();
});

и когда я создаю событие onclick для 'fClass' следующим образом:

$(".fClick").click(function(){
    alert("hey!");
});

Это не работает! Однако, если я ставлю функцию onclick внутри другой функции, сразу после .dialog(), она работает! У меня есть много элементов, созданных таким образом, поэтому я не могу поместить все события onclick в один метод. Есть ли способ обойти это? У меня такая же проблема с методом .append.

Ответ 1

Измените его на .on или .delegate на основе версии jQuery, которую вы используете.

Как в jQuery 1.7 +

$(document).on('click', '.fClick', function(){ 
    alert("hey!");
});

Для более старых версий jQuery используйте делегат

$(document).delegate('.fClick', 'click', function(){
    alert("hey!");
});

Ответ 2

Используйте on вместо click:

$(".fClick").on('click',function(){
  alert("hey!");
});

click добавляет обработчики кликов к элементам .fClick, которые присутствуют при вызове $('.fClick').click({...}). Новые элементы .fClick, добавленные позже, не будут иметь событие click. Но когда вы используете on, все элементы .fClick будут иметь обработчик кликов, даже если они будут добавлены позже.
Подробнее здесь: http://api.jquery.com/on/

Ответ 3

снова вызовите $(document).ready(function()) и добавьте там свой код. Документ снова читается (обновляется), и вы можете просто применить там свой код.

Ответ 4

То, что сказала Вега, полностью работает. Есть подсказка: Я думаю, что во второй строке есть ошибка. Вероятно, вы можете использовать метод addClass, потому что вы не можете поместить id или класс в рендеринг. Вот пример:

var content = "<div>Hello, World</div>";
$("div").after(content);
$("last:div").addClass("mydiv");

И класс будет добавлен, но я не уверен, что вы можете добавить id.