Question

我有一个动态填充的表，以及一个重新加载脚本，可以在60秒内刷新它。

<script type="text/javascript" language="javascript">
    window.setInterval(function () {
        $('#divGrid').load('Home/Index #divGrid>table');
    }, 60000);
</script>

我还有一个Javascript，可以在表格行上点击部分视图点击：

<script type="text/javascript" language="javascript">
    function showOpenTrData() {
        $('#OpenTickets tbody tr').click(function () {
            $.ajax({
                url: 'Home/TicketDetails/' + this.cells.ticketID.innerText,
                data: {},
                type: 'GET',
                datatype: 'json',
                success: function (response) {
                    $("#TicketDetails").html(response)
                },
                error: {}
            });
        });
    }
    function showClosedTrData() {
        $('#ClosedTickets tbody tr').click(function () {
            $.ajax({
                url: 'Home/TicketDetailsClosed/' + this.cells.ticketID.innerText,
                data: {},
                type: 'GET',
                datatype: 'json',
                success: function (response) {
                    $("#TicketDetails").html(response)
                },
                error: {}
            });
        });
    }
</script>

我首先没有onclick功能，但是在重新加载后它会停止工作所以我将其更改为onclick函数，但是在重新加载后我必须双击该行并在此之后持续60秒直到接下来重新加载它很好，重新加载后我必须再次双击第一次。它把我推到了墙上。

请帮忙！

HTML

<table class="table" id="OpenTickets" style="overflow-y:scroll;width:70%;float:left; margin-top:-25px; display:block;">
    <tbody>
        @foreach (var item in Model.ticketModel.OrderByDescending(x => x.ticket.ID).Where(x => x.ticket.StatusID == 1))
        {
            <tr onclick="showOpenTrData()">
                <td class="columnID" id="ticketID">
                    @Html.DisplayFor(modelItem => item.ticket.ID)
                </td>
                <td class="columnSummary">
                    @Html.DisplayFor(modelItem => item.ticket.Summary)
                </td>
                <td class="columnAssignee" id="ajaxTest">
                    @if (item.ticket.Assigned_to_UserID == null || item.ticket.Assigned_to_UserID == 0)
                    {
                        @Html.Label("Unasigned")
                    }
                    else
                    {
                        @Html.DisplayFor(modelItem => item.assignedUser.First_name)
                        <text> </text>
                        @Html.DisplayFor(modelItem => item.assignedUser.Last_name)

                    }
                </td>

                <td style="font-size:11px; width:10%" class="columnUpdated">
                    @if ((item.ticket.updated_at == null))
                    {
                        @Html.DisplayFor(modelItem => item.ticket.Created_at)
                    }
                    else
                    {
                        @Html.DisplayFor(modelItem => item.ticket.updated_at)
                    }
                </td>
            </tr>
        }
    </tbody>
</table>

Answer 1

这里的基本问题是你将onclick=...与jQuery绑定.click(...)混合在一起。可以在同一页面上使用它们，但它会变得混乱并且难以维护：选择一个。

最简单的事情（根据您当前的代码）是杀死jQuery绑定。试试这个：

<script type="text/javascript" language="javascript">
    function showOpenTrData(ptr) {
        $.ajax({
            url: 'Home/TicketDetails/' + ptr.cells.ticketID.innerText,
            data: {},
            type: 'GET',
            datatype: 'json',
            success: function (response) {
                $("#TicketDetails").html(response)
            },
            error: {}
        });
    }
    function showClosedTrData(ptr) {
        $.ajax({
            url: 'Home/TicketDetailsClosed/' + ptr.cells.ticketID.innerText,
            data: {},
            type: 'GET',
            datatype: 'json',
            success: function (response) {
                $("#TicketDetails").html(response)
            },
            error: {}
        });
    }
</script>

每次showOpenTrData或showClosedTrData运行时，都会添加另一个 jquery绑定。如果您打开控制台并检查网络选项卡，您将看到ajax功能正在多次运行，只需单击一下（在第二次单击后）。

如果您只想使用jQuery，请使用：

 <script type="text/javascript" language="javascript">
     $(document).ready(function(){
        $('#OpenTickets tbody tr').click(function () {
            var ticketId = $(this).find('td').text();
            $.ajax({
                url: 'Home/TicketDetails/' + ticketId,
                data: {},
                type: 'GET',
                datatype: 'json',
                success: function (response) {
                    $("#TicketDetails").html(response)
                },
                error: {}
            });
        });
        $('#ClosedTickets tbody tr').click(function () {
            var ticketId = $(this).find('td').text();
            $.ajax({
                url: 'Home/TicketDetailsClosed/' + ticketId,
                data: {},
                type: 'GET',
                datatype: 'json',
                success: function (response) {
                    $("#TicketDetails").html(response)
                },
                error: {}
            });
        });
    }
</script>

此外，删除html中的onclick=...部分或者你会得到javascript错误，因为它正在寻找一个不存在的函数。

编辑：我在门票中添加了你需要的东西。

Answer 2

我明白了 - 如果其他人在这里挣扎就是崩溃。

.load方法呈现任何javascript无用，因为它不再是同一个实例的一部分，点击上的hovever是一个解决方案但是你如何获得对象引用？

你在点击功能中传递它。

onclick="showTableData(this)"

然后你可以使用传递的事件从中获取数据

欢呼

MVC Javascript表重新加载问题

2 个答案: