Question

在我的MVC应用程序中，我有一个表单，我进行了2个异步AJAX调用，1个用于获取新的数据页，另一个用于显示搜索结果。这些调用之前表单的初始加载很好。我想对我的行进行颜色处理，这有效;

$("#tblePagedList").on("change", styleRows);

function styleRows() {
    $("#tblePagedList tr:even").addClass("row1");
    $("#tblePagedList tr:odd").addClass("row2");
}

但是，在导航到新页面或进行搜索后，这些样式不会应用。我尝试连接更改事件失败了;

即

$("#tblePagedList").on("change", styleRows);

或

$("#tblePagedList").change(styleRows);

我的表看起来像;

<table id="tblePagedList">
    <thead>
        <tr>
            <th>
                Company
            </th>
            <th>
                Address
            </th>
            <th style="width:100px;">
                Telephone
            </th>
            <th style="width:100px;">
                Contact
            </th>
            <th style="width:100px;">
                Trade
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody id="tblePagedListBody"></tbody>
    @foreach (var item in Model) {
        <tr>
            <td>
                @item.Company
            </td>
            <td>
                @item.AddressLine
            </td>
            <td>
                @item.Telephone
            </td>
            <td>
                @item.Contact
            </td>
            <td>
                @item.TradeName
            </td>
            <td>
                @Html.ActionLink("Details", "DetailsSubcontractor", new { id = item.CompanyId })
            </td>
        </tr>
    }

Answer 1

输入值更改时会触发

On Change event，而不会更改DOM。如果你需要一个活动，我会注册一个自定义活动，我们称之为更新：

`$("#tblePagedList").on("update", handler)`

并在AJAX调用成功时手动触发：

`$("#tblePagedList").trigger("update")`

但我不确定你是否真的需要活动。也许在AJAX回调中调用styleRows就足够了？

如果您真的喜欢事件的想法，请考虑切换到BackboneJS。您可以将获取的数据存储在集合中，挂钩到集合更新事件并在该事件上呈现表。

BTW两次后续styleRows次调用可能会给出错误的结果，删除旧类：

function styleRows() {
    $("#tblePagedList tr:even").removeClass("row1 row2").addClass("row1");
    $("#tblePagedList tr:odd").removeClass("row1 row2").addClass("row2");
}

JQuery - 无法连接更改事件

1 个答案: