I would be extremely grateful if somebody were to point me in the right direction here.
When I use jQuery :eval to update div contents, the browser shows me the updated contents as expected. However, when I look at the source code, I see the old contents. I think this is causing a problem, because buttons embedded in the div no longer work. For example, I could have a table like this: <table> <tr><td>First row</td><td><button type="button" class="delete_it" id="1">Delete it</button></td></tr> <tr><td>Second row</td><td><button type="button" class="delete_it" id="2">Delete it</button></td></tr> </table> I would have a jQuery event set to trigger on click for buttons of class "delete_it." The event sends ajax to the server to delete a row in a linking table. Then the called server side function returns a jQuery command to reload div that contains the table. On first page load, if I click the "Delete it" button in the first row, everything appears to work. The row in the linking table gets deleted and the browser appears to reload the table with the first row absent. Except all is not well. If I then click the Delete it button in row 2, it no longer works. The click no longer fires. If I look at the page source, the first row is still there. I suspect jQuery thinks the page is still in the state it was when document.ready() first fired at page load time. How can I tell jQuery to refresh its view of the document without refreshing the whole page?
