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函数将无法再次触发，这意味着点击{{1将导致默认行为，即加载＆＃34; someURL＆＃34;的内容。进入你的窗口。

假设存在问题，您可以选择以下几种方法：

1）移动控件以加载动态内容之外的下一页。这样做的另一个好处是可以减少您通过线路发送的数据量

2）每次成功加载后重新绑定.inline点击处理程序。这不是一个很棒的解决方案，因为这意味着你在每次加载时都会做更多的工作。

3）使用jQuery's delegated events将处理程序附加到未被加载替换的.inline父元素。单击任何后续子元素，其类为＆＃34; inline＆＃34;将触发处理程序。这是一个非常合理的解决方案，但由于操作与控件分离，因此当您忘记了事件处理程序的位置时，它将使得维护和调试变得更加困难＆＃34;内联＆＃ 34;控制是。：）

模态窗口不适用于分页数据表

1 个答案: