Question

我使用Bootstrap 3和KnockoutJS。

我有一个包含5列的表，并希望使用Bootstrap Dropdown为上下文菜单操作添加第6列。

这是我的HTML：

<table id="employeesTable" class="table table-condensed table-striped table-bordered table-hover myDefaultTable">
    <thead>
        <tr>
            <th class="myDefaultTable-left">Employee Name</th>
            <th>... 4 other columns</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Employee">
        <tr data-bind="attr: { 'id': EmployeeId }">
            <td class="myDefaultTable-left" data-bind="text: EmployeeName"></td>
            <td data-bind="text: col2"></td>
            <td data-bind="text: col3"></td>
            <td data-bind="text: col4"></td>
            <td data-bind="text: col5"></td>
            <td>
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Actions
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#" data-bind="click: $parent.RemoveEmployee.bind($parent), clickBubble: false">Remove employee</a></li>
                        <li><a href="#" data-bind="click: $parent.DuplicateEmployee.bind($parent), clickBubble: false">Duplicate employee</a></li>
                    </ul>
                </div>
            </td>
        </tr>
    </tbody>
</table>

我的问题是，在JavaScript中，我有（并希望保留）点击操作，为表格中的点击项打开详细信息屏幕，如下所示：

$container.on('click', '#employeesTable tbody tr', { self: self }, self._employeeDetailClick);

我的上下文菜单事件公开如下：

self._model = ko.mapping.fromJS(result);
self._model.self = self;
self._model.RemoveEmployee = self._removeEmployee;

我正在寻找一种方法，不要在点击事件＆＃34;上调用＆＃34; tbody tr。当用户单击第6列但调用适当的上下文菜单事件时。我试过了clickBubble: false，但它没有用。

如果我评论出该行

$container.on('click', '#employeesTable tbody tr', { self: self }, self._employeeDetailClick);

...然后我的上下文菜单有效。

Answer 1

clickBubble: false实际上阻止了click事件冒泡到DOM元素的父元素。您需要将其设置为true。

除此之外，我非常同意Jeroen：你应该避免混淆jQuery＆amp;淘汰赛事处理。

var log = function(library) { console.log(library + ": CLICK") };

ko.applyBindings({
  logClick: log.bind(null, "KO")
});

$("body").click(log.bind(null, "jQuery"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<button data-bind="click: logClick, clickBubble: true">click bubble true</button>

<button data-bind="click: logClick, clickBubble: false">click bubble false</button>

Bootstrap上下文菜单使用tbody tr onclick事件在表格中下拉

1 个答案: