Как применить jQuery для добавленных (добавленных, befored) дивов?

Question

Почему jQuery не применяется к динамически создаваемым элементам?

Вот jsFiddle: http://jsfiddle.net/Y5RuC/19/

При нажатии на обычную ячейку она меняет границу. При нажатии на сгенерированные ячейки ничего не происходит. Зачем? И что мне нужно изменить, чтобы сгенерированные ячейки работали?

1) Создать доску:

function generateBoard() {
    var generatedDiv = "<div class='board'>";
        /* ... 
            generatedDiv += "<div class='cell'>&nbsp;</div>";
           ...
        */
    generatedDiv += "</div>"
    return generatedDiv
}

    $("#generate").click(function() { 
        generatedDiv = generateBoard();
        $("#board").after(generatedDiv);
    });   

2) Добавить div:

generatedDiv = generateBoard();
$("#menu").after(generatedDiv);

3) Изменить границу при нажатии:

    $(".cell").click(function() { 
        console.log(this);
        $(this).css("border", "3px solid black");
    });

Не работает для автоматически сгенерированного контента. В чистом HTML: Просто работает. В сгенерированной плате - просто нет :( Еще раз вот jFiddle: http://jsfiddle.net/Y5RuC/19/

Как сделать это за $ (". Cell"). Нажмите , чтобы нормально работать на сгенерированной доске?

Answer 1

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

on версия:

$("body").on("click", ".cell", function(){
        console.log(this);
        $(this).css("border", "3px solid black");
});

Рабочая JSFiddle

JQuery on Документы

Answer 2

Вам нужно использовать либо методы delegate(), либо live() для прикрепления событий, которые будут работать на всех совпадающих элементах, текущих или будущих. delegate() является предпочтительным методом.

Или, если вы используете jQuery 1.7+, вы можете использовать on() ( docs )