JQuery assigning a newly created link to a variable?

Question

Hello!

How do i assign this newly created link to the local variable?

tblOutput += '<td>';

tblOutput += $('<a></a>')
    .click(function (e) {
        $.fancybox({ 'autoDimension': true, 'showCloseButton': true, 'type': 'iframe', 'href': 'WordManagerForm.aspx?cmd=updateword&amp;categoryNodeID=' + nodeID + '&amp;nodeID=' + id_text });
            e.preventDefault();
        })
    .css('color', 'Blue')
    .text(name_text);


tblOutput += '</td>';

I have tried applying .html() after .text(name_text) but that only prints the text out and not the active link. How can i get the link to work? After i have gone thru the loop i add the variable tblOutput to a div using $('#divOut').html(tblOutput);

It worked when i assigned it to an element with an id, like <div id="test"...> and then .text(name_text).appendTo('#test');.

Full loop:

$(xml).find('word').each(function () {                        
                    var id_text = $(this).attr('id');
                    var name_text = $(this).attr('name');
                    var translation_text = $(this).attr('translation');

                    $('<a></a>')
                         .click(function (e) {
                             $.fancybox({ 'autoDimension': true, 'showCloseButton': true, 'type': 'iframe', 'href': 'WordManagerForm.aspx?cmd=updateword&amp;categoryNodeID=' + nodeID + '&amp;nodeID=' + id_text });
                             e.preventDefault();
                         })
                         .css('color', 'Blue')
                         .text(name_text)
                         .appendTo('#bottomRight');
                    $('<br>').appendTo('#bottomRight');
                });

Answer 1

to get the outer html of an element (including the same) you need to wrap it inside another and get the html of the wrapper..

so

.text(name_text)

should change to

.text(name_text).wrap('div').parent().html()

but the css applied with jquery and the click event will not be there once you add that string in the dom, because you seem to be storing everything as a string and then adding that to the DOM.. (the moment you convert a jquery object to its string equivalent, you loose all DOM dynamic changes to properties (with .css()) and all events attached..)

Answer 2

You'll need to build the table as elements rather than a HTML string here...I can't say exactly what it would be without seeing your outer loop, but here's the general idea:

//row loop...
var row = $("<tr></tr>");

  //create cells here...
  var cell = $("<td></td>");
  $('<a></a>')
    .click(function (e) {
        $.fancybox({ 'autoDimension': true, 'showCloseButton': true, 'type': 'iframe', 'href': 'WordManagerForm.aspx?cmd=updateword&amp;categoryNodeID=' + nodeID + '&amp;nodeID=' + id_text });
            e.preventDefault();
        })
    .css('color', 'Blue')
    .text(name_text)
    .appendTo(cell);
  cell.appendTo(row);
  //end cell loop

row.appendTo('#myTable');
//end row loop

Or if you're creating the entire table, create that as an element as well, then append the whole table to the DOM at once, since appending to the DOM is a relatively expensive operation.