JQuery 选项卡在 Jquery DataTables 的 Page2 上不起作用

Question

我有一个 Coldfusion 应用程序，它输出使用 JQuery DataTables 格式化的 cfquery 结果。这按预期工作。但在 jQuery 数据表显示中，我有使用 jQuery 选项卡 UI 格式化的内容。奇怪的是它在分页结果的第一页上正确构建了选项卡，但在任何其他分页页面上都没有。

我认为这可能与引用的 jQuery 选项卡不是唯一的 ID 有关，因此我将每个 DIV 的 ID 的名称附加到我的 CFQuery 结果的唯一输出中，但这没有帮助。

我假设它只是不执行 jQuery 代码来在 jQuery DataTables 的后续页面上构建选项卡，但我不知道当您单击第二页链接时如何强制它执行此操作。我也可能离题，但这是我的怀疑。

这是我的大部分 jQuery DataTables 和 TABS UI 的代码。我认为不需要所有代码，只需要大部分代码。

有人对此有任何见解吗？

<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

好的，所以运行这段 Javascript 似乎会强制创建 TABS UI。不是那么优雅，但它有效。有没有更好的办法？

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