jQuery HTML replacement of an area with links - further HTML replacements don't work

Rails 2.3.5

• I have a table of tickets with each record having a link to 'show' the ticket.
• This list is often refreshed by a jQuery HTML method via (fresh Ajax pull of the list)
• If you click on a 'show' link a jQuery UI Dialog opens up
• Inside the UI Dialog is jQuery tabs. One tab is to 'add comments'
• The add comments for submit replaces a container for existing comments with a fresh list (make new comment - see it appear)
• When this modal (or the edit/new modals close), they click the button of the search/filter form to force a refresh of the ticket list on close

This all works perfectly. Where it breaks down is when the list of tickets is updated via Ajax. If the ticket list is rebuilt by Ajax (jQuery HTML replacement), the 2nd time the 'add comment' button in the modal dialog is clicked, it's like jQuery doesn't know what element id I'm talking about and the comments partial renders by itself, replacing the page.

Something about an Ajax update of the list f开发者_高级运维ollowed by the 2nd click on a 'show' link, causes the jQuery HTML replacement of the comment container to not recognize the id of the comment container.

Any thoughts? Thanks!

---- .js.erb File that replaced the ticket list

 $("#issue_main_list_container").html("<%= escape_javascript(render("ticket_index_body_worklist")) %>");

---- .js.erb File that replaces the coments div in the 'show' modal

$("#show_comments_block").html("<%= escape_javascript(render("ticket_show_insert_comment")) %>");

---- when a show link is clicked in the table ----------

<script>
    $('.show_ticket_link' ).click(function(){
//    new_ticket_ajax_wait();
var url = $j(this).attr("href");
  $j("#form_load").load(url,
    function() {
        $j(this).dialog({
                modal:true,
                draggable: true,
                resizable: false,
                width:'auto',
                height:'auto',
                title: ' Showing ticket ',
                position: [125, 50],
                autoResize: true,
            close: function(){
            // on close submit the filter button to ajax refresh the ticket list
            $j('#ticket_filter_form_submit_button').click();
            }
        });
    });
return false;
});

</script>

Perhaps clicking on "add comments" the second time is doing a full page load because your click handler isn't registered on the link.

Try using .live instead of .click to register your click event handler. This will handle the click event for links that are dynamically added to your page.

$('.show_ticket_link' ).live("click", function(){
//    new_ticket_ajax_wait();
var url = $j(this).attr("href");
  $j("#form_load").load(url,
    function() {
        $j(this).dialog({
                modal:true,
                draggable: true,
                resizable: false,
                width:'auto',
                height:'auto',
                title: ' Showing ticket ',
                position: [125, 50],
                autoResize: true,
            close: function(){
            // on close submit the filter button to ajax refresh the ticket list
            $j('#ticket_filter_form_submit_button').click();
            }
        });
    });
return false;
});