模式窗口不能用於分頁數據表

Question

我正在使用colorbox模式窗口和數據表。

模態窗口正常顯示，如果我在數據表中顯示第1頁的事件，模態窗口顯示出我想要的有效性。當我在數據表中從第2頁開始執行相同的事件時，不是打開模態窗口，而是用模態窗口內容替換當前頁面。

我加入警報在jQuery功能，當我在做網頁的事件，這些警報沒有被解僱2.

下面是相關代碼：

HTML：

<div id="tab2" class="alltables paddingbox"> 

               <!-- buttons section -----> 
               <table width="100%" class="display dataTable" id="tb1"> 
                <thead> 
                 <tr> 
                  <th style="width:2%; background-image:none; cursor:auto" ></th> 
                  <th style="width:10%">One</th> 
                  <th style="width:10%">Two</th> 
                  <th style="width:48%; ">Three</th> 
                  <th style="width:10%; background-image:none">View</th> 
                  <th style="width:10%; background-image:none">Edit</th> 
                 </tr> 
                </thead> 

                <tbody> 
                   <tr id="${id}" class=""> 
                      <td> 
                       <img src="imgurl" /> 
                      </td> 
                    <td> Name</td> 
                    <td>Date</td> 
                    <td>comments</td> 
                    <td><a class='inline tableshare btnRadius' href='someurl'>View</a></td> 
                      <td id="editURL"> 
                       <a href="someURL">Edit</a> 
                      </td> 
                    </tr> 
                </tbody> 
               </table> 
           </div> 

JS代碼：

<script type="text/javascript"> 
          $(document).ready(function() { 
           $(".inline").colorbox({inline: true, width: "50%"}); 

           // This makes the link inside the iframe open in the parent window 
           $('.inline').on('click', function(event) { 
            alert('In .... Inline click....'); 
            var curURL = $(this).attr("href"); 
            $.ajax({ 
             type: "GET", 
             url: curURL, 
             success: function(response) { 
              alert('In success.....'); 
              $.colorbox({title: "Title", width: "70%", height: "70%", html: response}); 
             }, 
             error: function(xhr) { 
              $.colorbox({title: "Title", width: "70%", height: "70%", html: "Some error occured ....."}); 
             } 
            }); 
           }); 

          }); 

         </script>  

jQuery 1.10.2是我使用的版本。

Answer 1

（這確實不是很足夠的信息可以肯定的，但你的描述是非常普通的，我感覺很舒服提出這是一個可能的答案。）

這可能是綁定到您的.inline元素的click處理問題。

在頁面一上，一切加載和ready函數將您的處理程序綁定到現有的DOM元素。如果您然後動態加載數據的第2頁，其中包含它自己的.inline元素，那麼ready函數將不會有任何理由再次觸發，這意味着點擊.inline將導致默認行爲，即加載「someURL」的內容放入您的窗口。

假設這就是問題所在，你有幾種選擇：

1）將控制加載動態內容外的下一個頁面。這有額外的好處，減少您通過電線發送的數據量

2）每次成功加載後重新綁定.inline點擊處理程序。這不是一個很棒的解決方案，因爲這意味着您在每次加載時都會做更多的工作。

3）使用jQuery's delegated events將處理程序附加到未被加載替換的父元素.inline。點擊任何具有「inline」類的後續子元素將觸發處理程序。這是一個完全合理的解決方案，但是由於該操作與控件分離，因此當您忘記該「內聯」控件的事件處理程序位於何處時，將來很難進行維護和調試。 :)