模式窗口不能为分页数据表工作

Modal window not working for paginated data table

本文关键字：数据表 工作 分页 窗口 不能 模式      更新时间：2023-09-26

我使用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的父元素，而不是被加载所取代。点击任何带有"inline"类的后续子元素都将触发处理程序。这是一个完全合理的解决方案，但由于操作与控件分离，因此当您忘记"内联"控件的事件处理程序在哪里时，将来维护和调试将变得更加困难。:)

我最近遇到了同样的问题，我正在向多年前创建的数据表添加元素。

我的javascript事件只在第1页工作…

经过一些调查，我确实在表绘制事件上添加了我的javascript事件的副本，然后在每次绘制之后，我的点击事件被添加到每个点击的页面。

//your dataTable name
table.on( 'draw', function () {
    
        //unbind your old event 
        $('img[data-enlargeable]').addClass('img-enlargeable').unbind('click');
        
        //your new event here
        $('img[data-enlargeable]').addClass('img-enlargeable').click(function() {
        //TODO Add some useful code here
        }
        
}
相关文章：