jquery ui dynamic table onclick event is not working

I have requirement to display dynamic table in jquery. On clicking on table data the value should set in below text field.

May I know how to capture the name from dynamic table and set into text field

$(document).ready(function() {
    //Retrieve the JSON data from the server using AJAX
    $('#AJAXButton').click(function() {
        $.getJSON('ajax/ajaxtest.js', function(data) {
            processJSON(data);
        });
    });

    //Process and display the JSON data
    function processJSON(data) {
        var output = '<table><tr><th>Name</th><th>Platform</th></tr>';
        //Loop through the Languages 
        $(data.Languages).each(function(index, element) {
            output += '<tr><td class="clickable">' + element.Name + '</td>' + 
              '<td class="clickable">' + element.Platform + '</td></tr&g开发者_如何学Got;';
        });
        output += '</table>';
        $('#AJAXDiv').html(output);
    }

    $("tr.clickable").live("click", function() {
            $("#name").append(?);
    });

});


<div id="AJAXDiv" style="width:400px; height:600px; background-color:#ddd; border:1px solid black">
</div>

<div>
    <label for="name">Created by: </label> <input id="name" />
</div>

---

Take a look at this fiddle and let me know if it's not what you intended.

---

You say you want the event to happen when the row is clicked, so you just put the 'clickable' class on your row instead of every 'td'. The click handler can then access first 'td' within that row (the name that you are after).

ie. Demo