0

我无法将单击事件绑定到单元格中的按钮。该表最初是通过剃须刀代码填充的

enter code here<table class="table table-bordered" id="requestTable">
        <thead>
            <tr>
                <th class="dynatable-header">
                    Request ID
                </th>
                <th class="dynatable-header">
                    Caller ID
                </th>
                <th class="dynatable-header">
                    Result Code
                </th>
                <th data-dynatable-column="address1And2" class="dynatable-header">
                    Address 1 &amp; 2
                </th>
                <th class="dynatable-header">
                    City
                </th>
                <th class="dynatable-header">
                    State
                </th>
                <th class="dynatable-header">
                    Zip
                </th>
                <th class="dynatable-header">
                    Request Date
                </th>
                <th data-dynatable-column="requestTime" class="dynatable-header">
                    Request Time (ms)
                </th>
                <th data-dynatable-column="moreInfo" class="dynatable-header">

                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (AdminRequest request in this.Model)
            {
                <tr>
                    <td>
                        @request.RequestID
                    </td>
                    <td>
                        @request.CallerID
                    </td>
                    <td>
                        @request.ResultCD
                    </td>
                    <td>
                        @(request.AddressLine1 + " " + request.AddressLine2)
                    </td>
                    <td>
                        @request.City
                    </td>
                    <td>
                        @request.State
                    </td>
                    <td>
                        @request.ZipCode
                    </td>
                    <td>
                        @request.RequestDate
                    </td>
                    <td>
                        @(request.RequestMS.HasValue ? request.RequestMS.Value : 0)
                    </td>
                    <td>
                        <!--button goes here-->
                    </td>
                </tr>
            }
        </tbody>
    </table>

我通常会使用操作链接填充单元格以将我推到另一个页面，但是我想要一个按钮来显示弹出窗口。因此，我需要表格中的动态绑定按钮，这些按钮可以访问该行的数据，以便在单击时调用 Web 服务以获取其余数据。我厌倦了使用 jQuery 数据表，并认为我会尝试一些新的东西并使用 dynatables。

填充后，我在桌子上调用 dynatables。我编写了一个自定义 rowReader 来去除数据附带的空格等。

$("#requestTable").dynatable({
        features: {
            pushState: false //stop firefox from erroring on the character limit
        },
        readers:{
            _rowReader: function (index, tr, record) {
                record.requestId = record.requestId.trim();
                record.callerId = record.callerId.trim();
                record.resultCode = record.resultCode.trim();
                record.address1And2 = record.address1And2.trim();
                record.city = record.city.trim();
                record.state = record.state.trim();
                record.zip = record.zip.trim();
                record.requestDate = record.requestDate.trim();
                record.requestTime = record.requestTime.trim();
                record.moreInfo = "<button type='button' class='btn btn-primary'>More Info</button>";
            }
        },
        writers: {
            "moreInfo": function (record, tr) {
                var button = record.moreInfo;
                $(button).on("click", function () {
                    alert("hello");
                });
                return button;
            }
        }
    });

这会呈现按钮，但不会附加事件处理程序。关于我做错了什么的任何想法？

提前致谢！

4

2 回答 2

0

您可以尝试替换以下行

<button type='button' class='btn btn-primary'>More Info</button> 用下面的线 <div class="add_to_this"></div>

然后你可以像下面这样附加事件。

function handler() { alert('hello'); } $('.btn btn-primary').append(function() { return $('<button>More Info</button>').click(handler); })

于 2015-09-01T18:47:38.877 回答
0

解决方案

在修补之后，我找到了一个不错的解决方案。

我现在最初在循环中渲染按钮。

我添加了下面的功能

var bindClicks = function () {
        var data = $("#requestTable").data("dynatable");
        $.each(data.settings.dataset.records, function (index, item) {
            var tr = $("#requestTable tbody tr").eq(index);
            $(":last-child", tr).addClass("moreInfoButton");
            $(".moreInfoButton > button", tr).on("click", function () {
                console.log("test");
            });
        });
  };

该函数基本上获取我们正在迭代的当前 tr，然后继续获取该 tr 中的最后一个 td。这样我就可以搜索按钮，并将点击功能绑定到它。

为了执行此功能，我将表定义编辑为如下所示。

var dynatable = $("#requestTable").dynatable({
        features: {
            pushState: false 
        },
        table: {
            readers: {
                testReader: function (index, columns, record) {
                    record.requestId = record.requestId.trim();
                    record.callerId = record.callerId.trim();
                    record.resultCode = record.resultCode.trim();
                    record.address1And2 = record.address1And2.trim();
                    record.city = record.city.trim();
                    record.state = record.state.trim();
                    record.zip = record.zip.trim();
                    record.requestDate = record.requestDate.trim();
                    record.requestTime = record.requestTime.trim();
                }
            }
        }

    }).bind("dynatable:afterProcess", bindClicks);

    dynatable.data("dynatable").process();

随时改进我的答案。

于 2015-09-01T21:24:59.367 回答