title: Modal window not working for paginated data table
body: <p>I am using <code>colorbox</code> for modal window and data table. </p>
  
  <p>Modal window showing up properly if I do event from page 1 in data table, modal window showing up with the cotent I want.  When I do same event from page 2 in data table, instead of opening modal window, current page is being replaced with modal window content.</p>
  
  <p>I have added alerts in <code>jQuery</code> function, these alerts are not being fired when I do event in page 2.</p>
  
  <p>Here is the relevant code:</p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div id="tab2" class="alltables paddingbox"&gt;
  
                                                  &lt;!-- buttons section -----&gt;
                                                  &lt;table width="100%" class="display dataTable" id="tb1"&gt;
                                                      &lt;thead&gt;
                                                          &lt;tr&gt;
                                                              &lt;th style="width:2%; background-image:none; cursor:auto" &gt;&lt;/th&gt;
                                                              &lt;th style="width:10%"&gt;One&lt;/th&gt;
                                                              &lt;th style="width:10%"&gt;Two&lt;/th&gt;
                                                              &lt;th style="width:48%; "&gt;Three&lt;/th&gt;
                                                              &lt;th style="width:10%; background-image:none"&gt;View&lt;/th&gt;
                                                              &lt;th style="width:10%; background-image:none"&gt;Edit&lt;/th&gt;
                                                          &lt;/tr&gt;
                                                      &lt;/thead&gt;
  
                                                      &lt;tbody&gt;
                                                                  &lt;tr id="${id}" class=""&gt;
                                                                              &lt;td&gt;
                                                                                  &lt;img src="imgurl" /&gt;
                                                                              &lt;/td&gt;
                                                                      &lt;td&gt; Name&lt;/td&gt;
                                                                      &lt;td&gt;Date&lt;/td&gt;
                                                                      &lt;td&gt;comments&lt;/td&gt;
                                                                      &lt;td&gt;&lt;a class='inline tableshare btnRadius' href='someurl'&gt;View&lt;/a&gt;&lt;/td&gt;
                                                                              &lt;td id="editURL"&gt;
                                                                                  &lt;a href="someURL"&gt;Edit&lt;/a&gt;
                                                                              &lt;/td&gt;
                                                                     &lt;/tr&gt;
                                                      &lt;/tbody&gt;
                                                  &lt;/table&gt;
                                  &lt;/div&gt;
  </code></pre>
  
  <p>JS code:</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
                              $(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 ....."});
                                          }
                                      });
                                  });
  
                              });
  
                          &lt;/script&gt;    
  </code></pre>
  
  <p>jQuery 1.10.2 is the version I am using.</p>