jQuery – Concentrez-vous sur TR

Bon, je crée un plug-in pour permettre la modification en ligne des tableaux de mon site Web, mais jusqu’à maintenant, la plupart des travaux sont terminés, mais je n’arrive pas à obtenir le focus de la table. Donc, si quelqu’un a terminé l’édition et commence à éditer une nouvelle ligne ou s’il clique simplement hors de la ligne, la sauvegarde devrait être rétablie et revenir à la normale. Mais si j’utilise le flou sur la ligne, il n’y a pas de réponse, mais si j’utilise le flou sur l’élément, il se déclenche lorsque les utilisateurs passent d’un élément à un autre.

Mais si j’utilise focusout sur la ligne, cela se déclenche chaque fois que quelqu’un quitte également l’élément, même s’il clique dans la même ligne. Il n’y a rien non plus dans la variable d’événement qui me dise sur quel élément le focus est mis, donc je ne peux pas comparer avec la ligne actuelle pour voir si elles ne font que cliquer dessus.

Je pense que cette option sera sauvegardée en mode Entrée / Cliquez avec la souris sur un bouton Enregistrer / Commencez à modifier une autre ligne, mais je préférerais que cela fonctionne, car cela semble être une méthode bien meilleure pour le faire. Pensé quelqu’un? S’il vous plaît?

Je répondrais à votre demande en liant un gestionnaire de clics pour l’ensemble du document, puis en ajoutant un appel à stopPropagation () au sein de mes autres événements de clic. J’ai installé un violon à démontrer: http://jsfiddle.net/NwftK/

 Hello World

Et le jQuery:

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

Le problème est que même si vous avez des éléments nesteds, la focalisation se déclenchera sur l’élément parent lorsque vous vous focaliserez sur l’un des éléments enfants. Une solution à laquelle je peux penser serait de garder une trace de la ligne courante en utilisant une variable. Le pseudo-code pourrait fonctionner comme ceci:

 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; });

Il existe deux cas dans lesquels vous devez détecter le moment où la ligne perd son focus: un lorsque vous êtes dans la table et deux lorsque vous quittez la table.

Vous pouvez essayer quelque chose comme ça:

 //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"); }) //sortingggers 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 sortingggers 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(); }; })