Question

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

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;
            }
        }
    });

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

提前致谢！

Answer 1

您可以尝试替换以下行

2015-09-01 14:23:05.983 DEBUG 12936 --- [nio-8443-exec-8] o.s.s.w.a.logout.LogoutFilter : Logging out user 'org.springframework.security.oauth2.provider.OAuth2Authentication@e6269aa6: Principal: mrpink_bd3d5b71-b212-11e4-ac24-22000b4791d2; Credentials: [PROTECTED]; Authenticated: true; Details: remoteAddress=127.0.0.1, sessionId=<SESSION>, tokenType=bearertokenValue=<TOKEN>; Granted Authorities: ROLE_USER' and transferring to logout destination 2015-09-01 14:23:05.984 DEBUG 12936 --- [nio-8443-exec-8] o.s.s.w.a.l.SecurityContextLogoutHandler : Invalidating session: B7B50DC106F50EDA84ACFEF229DE167B 2015-09-01 14:23:05.984 DEBUG 12936 --- [nio-8443-exec-8] .s.s.w.a.l.SimpleUrlLogoutSuccessHandler : Using default Url: /#/home 2015-09-01 14:23:05.984 DEBUG 12936 --- [nio-8443-exec-8] .s.s.w.a.l.SimpleUrlLogoutSuccessHandler : Response has already been committed. Unable to redirect to /#/home 2015-09-01 14:23:05.984 DEBUG 12936 --- [nio-8443-exec-8] s.s.w.c.SecurityContextPersistenceFilter : SecurityContextHolder now cleared, as request processing completed 以下线 <button type='button' class='btn btn-primary'>More Info</button>

然后你就可以像下面那样附上活动。

<div class="add_to_this"></div>

Answer 2

Solution

After tinkering around I found a decent solution.

I now render the button in the loop initially.

I added the function below

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");
            });
        });
  };

The function basically gets the current tr we are iterating over, and then proceeds to get the last td in that tr. That way I can search for the button, and bind the click function to it.

To execute this function, I edited the table definition to what is shown below.

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();

Feel free to improve upon my answer.

将单击事件绑定到单元格中的按钮

2 个答案:

Solution