JQuery 选项卡不适用于 Jquery DataTables 的 Page2

Question

I have a coldfusion application that is outputting cfquery results that are formatted using JQuery DataTables. That works as expected. But within the the jQuery datatable display, I have content that is formatted with the jQuery tabs UI. The strange thing is is that it builds the tabs correctly on the first page of the paginated results, but not on any of the other paginated pages.

I thought it might be related to the ID's that the jQuery tabs that are referenced not being unique, so I appended the name of each DIV's ID with a unique output from my CFQuery results, but that didn't help.

I assuming it's just not executing the jQuery code to build the tabs on the subsequent pages of the jQuery DataTables, but I do not know how to force it to do that when you click the page two link. I could also be way off, but that is my suspicion.

Here is my code for most of the jQuery DataTables and and TABS UI. I didn't think all was needed, just the bulk of the code.

Does anyone have any insight on this?

<table id="dashboard_table1" width="100%" class="display" data-tableid="1">
    <thead>
        <tr>
          <th width="6%" style="text-align: left">&nbsp;</th>
            <th width="13%" style="text-align: left">Customer ID</th>
            <th width="44%" style="text-align: left">Customer Name</th>
            <th width="37%" style="text-align: left">Phone Number</th>
        </tr>
    </thead>
      <tbody>
    <cfoutput query="residential_customers">
        
        <tr>
          <td style="text-align: left">&nbsp;</td>
            <td style="text-align: left">#customer_id#</td>
            <td style="text-align: left">
            
            <a id="edit-customer-open#customer_id#" href="##edit-customer-modal#customer_id#" rel="modal:open">#company_name#</a>
            
            <!--- Edit  customer modal --->                        
            <div id="edit-customer-modal#customer_id#" style="display:none; width:70%; padding:10px;">
                <fieldset>
                <legend><h1>Edit Customer Form</h1></legend>
                    <form name="edit_customer#customer_id#" id="edit_customer" method="post" action="actionpages/edit_customer.cfm">
                    <h3>Customer Number: #customer_id#</h3>
                    <input type="hidden" name="edit_customer_id" value="#customer_id#" />
                    <br />
                    
                    <strong>Customer Name:</strong><br />
                    <input name="edit_customer_name" id="edit_customer_name" type="text" required placeholder="Customer Name" value="#company_name#"><br><br>
                    
                     <strong>Customer Type:</strong><br />
                    <select name="customer_type" id="customer_type" required>
                    <option selected="selected" value="#customer_type#">#customer_type#</option>
                    <option value="bot">Block of Time</option>
                    <option value="billable">Billable</option>
                    <option value="residential">Residential</option></select>
                    
                    <br /><br />

                    
                    <strong>Primary Billing Contact*:</strong><br>
                    <input name="edit_first_name" id="edit_first_name" type="text" required placeholder="First Name*" value="#first_name#"> &nbsp;
                    <input name="edit_middle_name" id="edit_middle_name" type="text" placeholder="Middle Initial/Name" size="15" value="#middle_name#"> &nbsp;
                    <input name="edit_last_name" id="edit_last_name" type="text" required placeholder="Last Name*" value="#last_name#"> &nbsp;
                    <br><br>
                    
                    <input name="edit_email_address" id="editw_email_address" type="email" required placeholder="Email Address" value="#email_address#"><br>
                    <input name="edit_primary_phone" id="edit_primary_phone" type="text" required placeholder="Primary Phone Number" value="#phone1#"><br>
                    <input name="edit_alternate_phone" id="edit_alternate_phone" type="text" placeholder="Alternate Phone Number" value="#phone2#"><br><br>
                    
                    <strong>Company Address:</strong><br>
                    <input name="edit_address1" id="edit_address1" type="text" required placeholder="Address 1" value="#address1#"><br>
                    <input name="edit_address2" id="edit_address2" type="text" placeholder="Address 2" value="#address2#"><br>
                    <input name="edit_city" id="edit_city" type="text" required placeholder="City" value="#city#"><br>
                    <input name="edit_state" id="edit_state" type="text" required placeholder="State" value="#state#"><br>
                    <input name="edit_zip" id="edit_zip" type="text" required placeholder="Zip" value="#zip#"><br><br>
                    
                    Is Account Active?: <input type="checkbox" value="yes" name="active" id="active" <cfif #status# eq 1>checked="checked"<cfelseif #status# eq ''>checked="checked"</cfif> /><br /><br />

            
                    <input type="hidden" name="ticket_type" value="residential">
            
                    <input class="stylized_btn" type="submit" value="Save Customer"><div class="response" id="editdCustomerMessage"></div> 
            
                </form><br /><br /><hr />

                <script>
                  $( function() {
                    $( "##customer_tabs#customer_id#" ).tabs();
                  } );
                  </script>
                
                <!---Tabs --->  
                  <div id="customer_tabs#customer_id#">
                    <ul>
                      <li><a href="##customer_files#customer_id#">Customer Files</a></li>
                      <li><a href="##ticket_alerts#customer_id#">Ticket Alerts</a></li>
                      <li><a href="##customer_statements#customer_id#">Statements</a></li>
                      <li><a href="##customer_statement_history#customer_id#">Statement History</a></li>
                      <li><a href="##customer_ticket_history#customer_id#">Ticket History</a></li>
                      </ul>
                   
                   <div id="customer_files#customer_id#">
                   
                    <table  width="99%"  border="0" align="center" cellpadding="5" cellspacing="0">
                <tr><td>
                <!---File Upload section --->
                   <div id="AttachFile#customer_id#">
                        <div id="fileUploadDiv#customer_id#"></div>
                        
                        <cfoutput>
                        <script type='text/javascript'>
                        function PopulateFileUploadDiv#customer_id#(){
                            $('##fileUploadDiv#customer_id#').load('templates/file_upload.cfm?test=1&customer_id=#customer_id#&customer_type=residential');
                        }
                        $(document).ready(PopulateFileUploadDiv#customer_id#);
                        </script>
                        </cfoutput>
                   </div>
                </td></tr></table><br />
                <!---End of File Upload section --->
               
               
                   </div>
                   
                   <div id="ticket_alerts#customer_id#">
                   

Answer 1

Okay, so running this piece of Javascript seems to force the TABS UI to be created. Not that elegant but it works. Is there a better way?

                 <script>
                 $('tr').on('click',function(){
                    //console.log("This is a test"); 
                    $( "##customer_tabs#customer_id#" ).tabs();
                    PopulateFileUploadDiv#customer_id#();
                  });
                </script>