我正在使用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是我正在使用的版本。
（确实没有足够的信息可以确定，但是您所描述的内容很普遍，我很乐意将其作为可能的答案。）
这可能是绑定到.inline元素的click处理程序的问题。
在第一页上，所有内容都会加载，并且该ready函数将您的处理程序绑定到现有的DOM元素。然后，如果您动态加载数据第2页（包括其自己的.inline元素），则该ready函数将没有任何理由再次触发，这意味着单击.inline将导致默认行为，即加载“ someURL”添加到您的窗口中。
假设是问题所在，您有几种选择：
1）移动控件以在动态内容之外加载下一页。这样做还有一个好处，就是减少了您通过网络发送的数据量
2）.inline每次成功加载后，重新绑定单击处理程序。这不是一个很棒的解决方案，因为这意味着您在每个负载上都需要做更多的工作。
3）使用jQuery的委托事件将处理程序附加到其父元素上.inline，而该父元素不会被负载替换。单击具有“内联”类的任何后续子元素将触发处理程序。这是一个完全合理的解决方案，但是由于操作与控件是分开的，因此当您忘记了该“内联”控件的事件处理程序在哪里时，将来将很难进行维护和调试。:)
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句