Question

我尝试将TableSorter与最新的Scroller小部件一起使用，但是我遇到了使click事件在冻结列中冒泡的问题。我可以让悬停的psuedo类触发图标，但对于我的生活，我无法触发点击处理程序。有什么想法吗？

    <table id="groupAttrTable" class="tablesorter">
        <thead>
            <tr>
                <th data-sorter="false">Action</th>
                <th>Key 1</th>
                <th>Key 2</th>
                <th>Key 3</th>
                <th>Value 1</th>
                <th>Value 2</th>
                <th>Value 3</th>
                <th>Value 4</th>
                <th>Status</th>
                <th>Last Updated By</th>
                <th>Last Updated Time</th>
            </tr>
        </thead>
        <tbody>
            <tr data-attrID="1">
                <td>
                    <div class="regMode">
                        <a class="editAttr">
                            <i class="glyphicon glyphicon-pencil"></i>
                        </a>
                        &nbsp;
                        <a class="hideAttr">
                            <i class="glyphicon glyphicon-eye-close"></i>
                        </a>
                        <a class="unhideAttr">
                            <i class="glyphicon glyphicon-eye-open"></i>
                        </a>
                    </div>
                    <div class="editMode" style="display: none;">
                        <a class="confirmAttr">
                            <i class="glyphicon glyphicon-ok"></i>
                        </a>
                        &nbsp;
                        <a class="cancelAttr">
                            <i class="glyphicon glyphicon-remove"></i>
                        </a>
                    </div>
                </td>
                <td>Some Text</td>
                <td>Some Text</td>
                <td>Some Text</td>
                <td>Some Text</td>
                <td>Some Text</td>
                <td>Some Text</td>
                <td>Some Text</td>
                <td>Some Text</td>
                <td>Some Text</td>
                <td>Some Date</td>
        </tbody>
    </table>    

$("#groupAttrTable").tablesorter({
            theme : "bootstrap",
            headerTemplate : '{content} {icon}',
            widgets : [ "uitheme", "filter", "zebra", "scroller"],
            widgetOptions : {
              zebra : ["even", "odd"],
              scroller_fixedColumns: 4,
              scroller_height: 400,
              filter_external: ".groupAttrFilter",
              filter_defaultFilter: {'all':"~{query}"},
              filter_reset: ".groupAttrReset",
              filter_columnFilters: false
            }
        });

$(".hideAttr").on("click", function(e){
        console.log("hide attribute");
    }

Answer 1

滚动小部件需要制作tbody的多个副本。每次调整浏览器窗口大小，或者对表进行排序或过滤时，都会重建固定列。

因此，要使点击工作，您需要使用delegated event bindings。定位页面的body或表的任何包装器，而不是表本身：

$('body').on('click', '.hideAttr', function(e){
    console.log('hide attribute');
}

Tablesorter Scroller窗口小部件引导程序不允许单击事件在冻结列中冒泡

1 个答案: