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

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

(确实没有足够的信息可以确定，但你描述的内容很常见，我很乐意将此作为可能的答案。)

这可能是绑定(bind)到您的 .inline 元素的 click 处理程序的问题。

在第一页上，所有内容都已加载，ready 函数将您的处理程序绑定(bind)到现有的 DOM 元素。如果您随后动态加载数据的第 2 页，其中包含它自己的 .inline 元素，则 ready 函数将没有任何理由再次触发，这意味着单击 .inline 将导致默认行为，即将“someURL”的内容加载到您的窗口中。

假设这是问题所在，您有几个选择:

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

2) 每次成功加载后重新绑定(bind).inline 点击处理器。这不是一个很棒的解决方案，因为这意味着您在每个负载上都要做更多的工作。

3) 使用jQuery's delegated events将处理程序附加到未被加载替换的 .inline 的父元素。单击具有“内联”类的任何后续子元素将触发处理程序。这是一个非常合理的解决方案，但由于操作与控件分离，因此当您忘记了该“内联”控件的事件处理程序到底在哪里时，将来会更难维护和调试。 :)