2016-09-27 3 views
1

Ich habe Kontrollkästchen innerhalb der Tabelle einzelnen Zeilen.Klicken Sie auf Ereignis auch feuern, wenn Kontrollkästchen Kontrollkästchen Ereignis in einer Zeile ausgelöst wird

Ich möchte ein Ereignis ausgelöst werden, wenn an anderer Stelle in der Zeile klicken passiert. Aber wenn ein Kontrollkästchen aktiviert ist, möchte ich kein Ereignis auslösen.

Das ist mein Markup.

 <tbody data-bind="foreach:CustomerList"> 
      <tr onclick="removepage();" onmouseover="changeRowColor(this)" onmouseout="restoreRowColor(this)"> 

       <td> 
        <input class="checkbox" data-bind="attr: { Id: 'checkbox' + $data.Id },click:$parent.customerClick" type="checkbox"> 

       </td> 
       <td class="col-md-4"> 
        <span class="name" data-bind="text:customerName" /> 

       </td> 
       <td> 
        <span data-bind="text:siteName" /> 
       </td> 

      </tr> 
     </tbody> 

Also, wenn removePage() für alles gefeuert wird, wenn

customerClick() passiert, ich habe nicht die removePage wollen() gefeuert.

versuchte ich

customerClick: function() { 
     debugger; 
     e.stopPropagation(); 
    }, 

aber es hat nicht funktioniert.

Was habe ich falsch gemacht?

+4

In Ihrem Code ist 'e' nicht definiert ?! –

+0

Übergeben Sie "e" ohne Anführungszeichen als Parameter an Ihre customerClick-Funktion und überprüfen Sie es erneut. –

Antwort

1

Ihre customerClick Funktion sollte sein:

customerClick: function (event) { 
     event.stopPropagation(); 
    } 

,

0

Sie e verwenden, ohne sie als Parameter für die Funktion Hinzufügen so nur e in Ihrer Funktion hinzufügen()

customerClick: function(e) { 
    e.stopPropagation(); 
}, 
0

In Java-Skript können Sie die Sprudeln von Event-Listener stoppen, weil Sie einige haben, die Ihre Veranstaltung zuhören, können Sie aufhören, es zu den anderen Ereignissen zu sprudeln ...

event.stopPropagation()

ist die Methode, die Sie für

0

suchen Sie Ihre Veranstaltungen wie diese binden sollte:

$("#test > tbody > tr") 
 
    .on("click", "td:not(.notfiring)", function(){ 
 
    alert("click tr"); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="test"> 
 
<tbody> 
 
    <tr> 
 
    <td class="notfiring"> 
 
     <input class="checkbox" type="checkbox"> 
 
    </td> 
 
    <td> 
 
     Col 1 
 
    </td> 
 
    <td> 
 
     Col 2 
 
    </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Ich hoffe, das hilft Sie

Verwandte Themen