Question

I have a page with a ticket list. In it, there is a <td> that is either a grab or release link. That link inside the ” is wrapped in a ” for an ajax html replacement. Like:

<td>
 <div id="ticket_grab_release_<%= ticket.id %>">
    *----  either a grab or release link here ----*
 <div>
</td>

So, the user clicks on ‘grab’: They are assigned the ticket, the worklist is updated with their info on the page via HTML replacements, and the grab link is replaced with a ‘release’ link.

Next to this is a ‘complete’ link. When the user clicks on that, a small complete form opens in a jQuery UI-Dialog window. I ran into a problem though because along with the grab/replace link changing I also had to toggle this ‘complete’ link with a grey non-link ‘complete’ or an actual ‘complete’ link (if ticket released – disable complete link or visa versa).

The problem is that if this ‘complete’ link was greyed out and I replaced that with a ‘complete’ link, the UI Dialog window would not open. Like (no idea what I’m saying) the link wasn’t in the DOM.

I got frustrated for a bit and then tried wrapping the script in a <div> and doing an html page replacement on the whole script. I HTML replaced the greyed out ‘complete’ with a ‘complete’ link and then HTML replaced the script right after. Interestingly that worked, but I’m really curious as to why it worked. When you ajax insert a script through an HTML replacement, does that inserted script have access to the modified DOM where the original script only has access to the what was the original DOM from the page load?

<div id="html_replace_sript">
    <script type="text/javascript">
      $('.complete_ticket_link' ).click(function(){
        var url = $(this).attr("href");
          $("#form_load").load(url,
            function() {
                $(this).dialog({
                        modal:true,
                        draggable: true,
                        resizable: false,
                        width:'auto',
                        height:'auto',
                        title: ' Complete Ticket ',
                        position: [125, 50]
                });
            });
        return false;
      });
    </script>
</div>

Thanks – much apprecaited!

Answer 1

Check out live()‘s much less recource-demanding counterpart: delegate()

Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

That means that instead of having to look through the entire window for an element, it starts at the specified root, significantly reducing overhead. This is the best solution for your issue.