I have a
table of data that on a button click certain values are saved to the database, while other values are retrieved. I need the process to be continuous, but I can only get it to work the first time.
At first I was using .ajax() and .replaceWith() to rewrite the entire
table, but because this overwrites the DOM it was losing events associated with the
table. I cannot use .live() because I'm using stopPropagation() and .live() doesn't support it due to event bubbling. I was able to essentially re-bind the click event onto the
table within the .ajax() callback, but a second call to the button click event did nothing.
I changed the code to use .get() for the ajax and .html() to put the results in the
table (the server-side code now returns the complete
table sans the <table> tags). I no longer have to rebind the click event to the
table, but subsequent clicks to the button still do nothing.
Finally, I changed it to .load(), but with the same (non-) results.
By "do nothing" I mean while the ajax call is returning the new HTML as expected, it's not being applied to the
table. I'm sure it has something to do with altering the DOM, but I thought since I'm only overwriting the
table contents and not the
table object itself, it should work. Obviously I'm missing something; what is it?
Edit:
HTML:
<table id="table1" class="mytable">
<tr>
<td><span id="item1" class="myitem"></span>
<td><span id="item2" class="myitem"></span>
</tr>
</table>
<input id="Button1" type="button" value="Submit" />
jQuery:
$( "Button1" ).click( function() {
$( "table1" ).load(
"data.aspx",
function( data ) {
//...
}
);
} );
