knockoutjs Kontrollkästchen und klicken Sie auf Eltern td

Ich habe eine Tabelle mit einer Zeile. Die Reihe hat einen TD (mit einem Kontrollkästchen) und auf dem TD habe ich eine Klick-Funktion. Wenn das TD angeklickt wird, wird das Kontrollkästchen aktiviert/deaktiviert.knockoutjs Kontrollkästchen und klicken Sie auf Eltern td

Es funktioniert gut, wenn ich auf dem TD klicken, aber wenn der (visuellen) Wert der Checkbox ändern (aktiviert/deaktiviert es nicht bekommen) nicht auf das Kontrollkästchen klicken

Die gewünschte Situation ist:

Wenn ich das Kontrollkästchen klicken, wird der (visuellen) Wert der Checkbox Änderungen und ich kann eine Funktion aufrufen.
Wenn ich auf dem TD klicken (zum Beispiel einen AJAX-Aufruf zu machen), die (visueller) Wert des Kontrollkästchens ändert sich und ich kann einen aufrufen Funktion. (zB um einen AJAX-Anruf zu tätigen)

Wie können wir das erreichen?

Sample Code

Quelle

2012-05-30 Blottt

das Click-Ereignis Probleme zu vermeiden, verwenden Sie das label Element eine größere Fläche anklickbar zu machen. Hier habe ich das Etikett ein Blockelement gemacht, so dass es die ganze td aufgreift:

<td> 
    <label style="display: block"> 
     <input type="checkbox" data-bind="checked: checkBox" /> 
    </label> 
</td>

Siehe http://jsfiddle.net/mbest/LsxSh/

Quelle

2012-05-31 01:32:55

Danke !! Dies macht den Trick. Ich habe ein wenig bearbeitet, indem ich eine Klick-Funktion hinzugefügt habe. [http://jsfiddle.net/LsxSh/4/](http://jsfiddle.net/LsxSh/4/) – Blottt

das Kontrollkästchen klicken ruft den Klick Hander-Code für das td:

self.checkBox(!self.checkBox());

dies die Prüfung entfernt.

Quelle

2012-05-30 20:23:48

Es stimmt, jetzt die Frage ist, wie können wir dies vermeiden. Ich gebe genau an, wonach ich im ersten Post suche. – Blottt

hast du die Frage geändert :-) –

Ja: P ... Es wurde nicht richtig gebildet. – Blottt

Td Ereignis scheint die die Kontroll Click-Ereignis der Eingabe überschrieben werden

Quelle

2012-05-30 20:27:33 Shay

Das Problem ist, dass der Click-Handler für die TD Brände auch, wenn Sie die checkbox klicken, was bedeutet, die checkbox sowohl von dem Standard-Klick-Handler geändert wird für die checkbox und Ihre benutzerdefinierte Click-Handler für die TD (sie wirken sich gegenseitig aus). Die Lösung besteht darin, zu verhindern, dass Klicks auf die checkbox von der TD sprudeln. Sie können dies in Knockout mit dieser Bindung tun: click:function(){return true}, clickBubble:false.

Hier ist es in Aktion: http://jsfiddle.net/mbest/Eatdh/12/

Das glaube ich aber, dass ein label verwendet, ist ein besserer Ansatz (meine andere Antwort sehen).

Quelle

2012-05-30 22:19:31

Ich bevorzuge das, weil es zusätzliche HTML-Unordnung verhindert. – Tyrsius

"Label" könnte ein besserer Ansatz für das Szenario in der Frage sein, aber das ist genau die Lösung, die ich brauche, weil mein Click-Handler auf dem gesamten "tr" ist. –

Das ist nicht ganz trocken, aber seine schnelle und funktional: fiddle

<td data-bind="click:tdClick"> 
     <input type="checkbox" data-bind="checked: checkBox, click:tdClick" /> 
</td>

Quelle

2012-05-31 00:05:45 Tyrsius

Hier ist eine alternative Methode, die auch funktioniert: Ändern Sie die Datenbindung über das Kontrollkästchen auf "checked: checkBox, click: function() {return true;}, clickBubble: false". In Ihrem Fall wird das Kontrollkästchen aktiviert und dann deaktiviert, wenn Sie darauf klicken. –

@MichaelBest Ich denke, das ist die beste Lösung bisher. Warum posten Sie es nicht als Antwort? – Tyrsius

Rechts. Ich füge das meiner Antwort hinzu. –

knockoutjs Kontrollkästchen und klicken Sie auf Eltern td

Antwort

Verwandte Themen