Question

Why isn’t jQuery being applied to dynamically created elements?

Here is jsFiddle: http://jsfiddle.net/Y5RuC/19/

When you click on regular cell it changes the border.
When you click on generated cells nothing happens.
Why? And what do I need to change to get generated cells working?

1. Create a board:

   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. Append div:

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

3. Change border on click:

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

It doesn’t work for automatically generated content. In pure HTML:

<div class="cell"></div> 

Just works. In generated board – just not 🙁 Once again here is jFiddle: http://jsfiddle.net/Y5RuC/19/

How to make it for $(".cell").click to work fine in generated board?

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 version:

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

Working JSFiddle

Jquery on docs