write dynamic html with jquery

Question

Given this fiddle, what is preventing the HTML from being rendered?

JavaScript

$(document).ready(function(){
    function loadDiv( divId ) {
        $('#' + divId).html('<table><tr><td class="editable" id="' + divId + '">Edit Me</td></tr></table>');
    }

    $('td.editable').click(function() {
        var cellId = $('td.editable').attr('id');
        alert(cellId);
    });

    loadDiv( div1 );
    loadDiv( div2 );
});

My intention is to change the clicked cell into an input field and later post from it, but I'm not sure why it's not rendering.

Answer 1

You need to add quotes around your div ids.

loadDiv( "div1" );
loadDiv( "div2" );

http://jsfiddle.net/pp6nv/1/

Since the tables are added after the page loads, you'll have to use .on().

$('body').on("click", "td.editable", function() {
    var cellId = $(this).prop('id');
    alert(cellId);
});

http://jsfiddle.net/pp6nv/3/