bug in my jquery code while trying replace html elements with own values
- by loviji
I today ask a question, about using Jquery, replace html elements with own values. link text
And I use answer, and get a problem. function replaceWithValues not works same in all cases.I call this function two times:
1. btnAddParam click
2. btnCancelEdit click
$("#btnAddParam").click(function() {
var lastRow = $('#mainTable tr:last');
var rowState = $("#mainTable tr:last>td:first");
replaceWithValues(lastRow, rowState);
var htmlToAppend = "<tr bgcolor='#B0B0B0' ><td class='textField' er='editable'><input value='' type='text' /></td><td><textarea cols='40' rows='3' ></textarea></td><td>" + initSelectType(currentID) + "</td><td><input id='txt" + currentID + "3' type='text' class='measureUnit' /></td><td><input type='checkbox' /></td><td></td></tr>";
$("#mainTable").append(htmlToAppend);
});
//buttonCancelEdit located in end of row
$('#mainTable input:button').unbind().live('click', function() {
var row = $(this).closest('tr');
var rowState = $(this).closest('tr').find("td:first");
replaceWithValues(row, rowState);
$(this).remove();
});
//do row editable -- replaceWithElements
$('#mainTable tr').unbind().live('click', function() {
if ($(this).find("td:first").attr("er") == "readable") {
var rowState = $(this).closest('tr').find("td:first");
replaceWithElements($(this), rowState);
}
});
function replaceWithValues(row, er) {
if (er.attr("er") == "editable") {
var inputElements = $('td > input:text', row);
inputElements.each(function() {
var value = $(this).val();
$(this).replaceWith(value);
});
er.attr("er", "readable");
}
}
function replaceWithElements(row, er) {
if (er.attr("er") == "readable") {
var tdinit = $("<td>").attr("er", "editable").addClass("textField");
$('.textField', row).each(function() {
var element = tdinit.append($("<input type='text' value="+$.trim($(this).text())+" />"));
$(this).empty().replaceWith(element);
});
row.find("td:last").append("<input type='button'/>");
//$('.selectField') ...
//$('.textAreaField') ...
}
}
$("#btnAddParam").click() function works well. it call function replaceWithValues.
I call $('#mainTable tr').unbind().live('click', function() { } to do row editable, and it creates a button in the end of row.
After user can click this button and call function $('#mainTable input:button').unbind().live('click', function() {}. and this function call function replaceWithValues. but in this case it doesn't work.
