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.

div1 and div2 two are variables... put quotes around them.

VVV
– VVV

2013-02-25 20:42:31 +00:00
Commented Feb 25, 2013 at 20:42 — VVV
– VVV, Commented Feb 25, 2013 at 20:42

jrummell · Accepted Answer · 2013-02-25 20:49:35Z

3

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/

edited Feb 25, 2013 at 20:49

answered Feb 25, 2013 at 20:42

jrummell

43.2k18 gold badges116 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kermit Over a year ago

Sigh. Thanks for that. What must happen for it to be able to get caught by the click function?

Collectives™ on Stack Overflow

write dynamic html with jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related