[jQuery] Call to clone() not working in tabs loaded with Ajax
I have a page which jQuery.UI.Tabs to load content from other pages.
(See http://demos.zatechcorp.com/tcedashboard/)
On the 'Daily Budget Tracker' and 'Assets' tabs, I use clone() to add
a new table row to the form. The problem is, when I click the 'Add New
Row' button in either tab initially, nothing happens -- I don't even
get a javascript error. If I switch to a different tab and back, for
some reason it works.
Here's the button code:
<input name="button" id="button" value="Add New Row"
onclick="addRow('table1');" type="button" />
Js code:
function addRow(tableName)
{
// First, lets create the new row using the last one as template...
var clonedRow = $( "#" + tableName + " tr:last" ).clone();
var rowCount = $("#" +
tableName).children('tbody').children().size() - 5;
var colCount = clonedRow.children().size();
var num = rowCount+1;
// Loop through columns and replace
for (i = 0; i < colCount; i++) {
col = clonedRow.children('td')[i];
elements = $(col).children();
//Loop through column elements
for (j = 0; j < elements.size(); j++) {
iElement = elements[j];
//alert(iElement.nodeName);
//special
if (iElement.nodeName == 'INPUT' && iElement.type == 'radio') {
$(iElement).attr('name', 'radio' + num);
}
}
}
$("#" + tableName).append(clonedRow);
}
It works when I access the pages directly but not when they're loaded
into tabs. Where could I be going wrong?