jQuery - Focus su TR

Question

Ok, quindi sto creando un plug-in per consentire la modifica in linea dei tavoli nel mio sito Web, andando benissimo finora, ho ottenuto la maggior parte di esso, ma non riesco a ottenere Mettendo a fuoco fuori dal tavolo giusto. Quindi, se qualcuno ha terminato la modifica e inizia a modificare una nuova riga o solo clic fuori dalla riga, dovrebbe salvare e tornare alla normalità. Ma se uso la sfocatura sulla riga, non c'è risposta, ma se uso la sfocatura sull'elemento, si innesca quando le persone si scambiano da un elemento a un altro

Ma se uso il focusout sulla riga, si attiva ogni volta che qualcuno lascia l'elemento anche se fanno clic sulla stessa riga. Né c'è qualcosa sotto la variabile evento che mi dica su quale elemento si sta concentrando, quindi non posso confrontarmi con la riga corrente per vedere se stanno facendo clic con nella riga.

Sto pensando di salvarlo su Invio/Mouse Fare clic su un pulsante Salva/Inizia a modificare un'altra riga, ma preferisco farlo funzionare, poiché sembra essere un metodo molto migliore per farlo. Hai pensato a qualcuno? Per favore?

Answer 1

vorrei gestire la Sua richiesta legando un gestore clicca per l'intero documento, e quindi aggiungendo una chiamata stopPropagation() all'interno di altri miei eventi click. Ho installato un violino per dimostrare: http://jsfiddle.net/NwftK/

<table border="1" width="200"> 
    <tr id="myRow"><td>Hello</td><td>World</td></tr> 
</table> 

E il jQuery:

$(function() { 
    $("#myRow").on('click', function (e) { 
     $(this).css('background-color', 'blue'); 
     e.stopPropagation(); 
    }); 

    $(document).on('click', function() { 

     $("#myRow").css('background-color', 'red'); 
    }); 

}); 

Answer 2

Il problema è che anche se si dispone di elementi nidificati, il focusout verrà attivato sull'elemento padre quando ci si concentra su uno degli elementi figlio. Una soluzione che posso pensare sarebbe quella di tenere traccia della riga corrente usando una variabile. La pseudo codice potrebbe funzionare qualcosa di simile:

var row = ''; 
$(table_element).click(function() { 
          focused_row = $(this).parent(); 
          if(row != '' && focused_row != row) { 
           //code to save edits, user clicked different row 
          } 
          row = focused_row; 
         }); 

Answer 3

ci sono 2 casi in cui è necessario rilevare quando la riga perde lo stato attivo, One mentre si è all'interno della tabella e due quando lasci il tavolo.

si può provare qualcosa di simile:

//store the last visited row 
var row = false; 

// save the row if has changed 
function save() { 
    if (row.changed){ 
     console.log("save"); 
    } 
} 

// keep track of the row you are in 
// it doesnt work when you leave the table 
$("tr").on("focusin", function (e) { 
    if (row != this){ 
     if (row){ 
      save(); 
     } 
     row = this; 
     e.stopPropagation(); 
    } 
}); 

//keep track whenever the row changes 
$("tr").on("change", function (e) { 
    this.changed = true; 
    console.log("changed"); 
}) 

//triggers when you leave the table, you can try to save changes then. 
$(document).on("focusin", function (e) { 
    var el = $(e.target); //input or element that triggers this event 
    var elrow = el.parent().parent()[0]; // try to get the row from that input, ... if its an input 
    if (row && row !=elrow) { 
     save(); 
     e.stopPropagation(); 
    }; 
})