Bootstrap-Kontextmenü Dropdown in Tabelle mit tbody tr onclick Ereignis

Question

Ich benutze Bootstrap 3 und KnockoutJS.

Ich habe eine Tabelle mit 5 Spalten und möchte eine 6. Spalte für Kontextmenü Aktionen hinzufügen, mit Bootstrap Dropdown.

Hier ist mein 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> 

Mein Problem ist, dass in JavaScript, ich habe (und behalten will), um eine Klick-Aktion, die ein Detailbild des geklickten Element in der Tabelle öffnet, wie folgt :

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

Mein Kontextmenü Ereignisse ausgesetzt sind wie folgt:

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

Suche für eine Möglichkeit, das "tbody tr on click event" nicht aufzurufen, wenn der Benutzer auf Spalte 6 klickt, aber das entsprechende Kontextmenü-Ereignis aufruft. Ich habe versucht clickBubble: false, aber es funktioniert nicht.

Wenn ich Kommentar-out die Linie

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

... dann mein Kontextmenü funktioniert.

Answer 1

clickBubble: false verhindert tatsächlich, dass das Klickereignis bis zu den Eltern des DOM-Elements sprudelt. Sie müssen es auf true setzen.

Ansonsten stimme ich Jeroen voll und ganz zu: Sie sollten vermeiden, jQuery & Knockout Event Handling zu vermischen.

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>