JQuery: Recherche de l'objet qui a créé un élément DOM

Question

J'ai donc travaillé sur cette question toute la journée et je n'arrive pas à comprendre comment le faire fonctionner. J'ai une table avec TD rempli de contenu qui est tiré d'une base de données en utilisant une commande JQuery "getJSON". J'ai un gestionnaire d'événements configuré de sorte que lorsque vous double-cliquez sur un élément TD, son contenu devient un élément INPUT avec la valeur par défaut du contenu précédent du TD.

L'élément INPUT est créé à l'intérieur d'un objet Javascript appelée « Input » comme ceci:

var Input = function() { 
    var obj = this; 
    obj.docElement = $('<input/>').attr('type', 'text').val(obj.defaultValue); 
} 

Tout cela travaille jusqu'à présent. Mon problème est que je veux que l'utilisateur puisse appuyer sur la touche RETURN alors que l'entrée INPUT est sélectionnée pour indiquer qu'ils ont fini de modifier ce champ. J'ai essayé quelque chose comme le suivant:

$(obj.docElement).bind('keydown', function(e) { 
    if(e.which == 13) { 
     // do something 
    } 
} 

Cela fonctionne bien pour la première fois que vous modifiez un champ; Cependant, si vous modifiez un champ plusieurs fois, il cesse de fonctionner. Aussi, si vous double cliquez sur les TD, il finit par se casser. Je l'ai testé et j'ai déterminé que l'élément INPUT cesse d'enregistrer tout événement de type, comme si le "bind" n'existait plus dessus.

J'ai fait beaucoup de googling et j'ai déterminé que le gestionnaire JQuery "bind" standard placé sur un élément INPUT n'est pas fiable. J'ai donc décidé de joindre le gestionnaire d'événements à l'objet du document au lieu d'utiliser les éléments suivants:

$(document).bind('keydown', function(e) { 
    // do something 
} 

Je sais que je peux utiliser « e.target » pour obtenir l'élément cible que l'action est exécutée sur (et cela fonctionne pour moi, e.target se réfère correctement à l'élément INPUT).

Ma question est, comment puis-je obtenir l'objet qui a créé l'élément INPUT en premier lieu? Je dois être capable d'exécuter des fonctions contenues dans la classe "Entrée" correspondante qui a été utilisée pour créer l'élément INPUT. J'ai besoin d'appeler ces fonctions depuis la fonction "$ (document) .bind". Donc, fondamentalement, je dois pouvoir obtenir l'objet Input/creator d'un élément INPUT.

Si je n'ai rien expliqué assez clairement, faites le moi savoir. Toute aide à ce sujet serait grandement appréciée! Je suis également ouvert aux suggestions de méthodes alternatives (autres que l'utilisation de "$ (document) .bind").

Merci!

Answer 1

Je pense que je comprends le problème ...

Vous pouvez traverser le DOM pour trouver l'élément de document parent, mais ce n'est pas ce que vous entendez, non? Vous voulez l'élément de script parent qui a un tas de logique qui fonctionne sur l'élément.

Je suppose qu'il est probablement plus facile de fournir une sorte de référence au parent lorsque l'élément d'entrée est créé ... passez le au gestionnaire d'événements, ou placez-le dans un emplacement globalement accessible (comme current_element_parent var) .

Answer 2

Je suis d'accord avec tobyhede. Vous pouvez ajouter un attribut personnalisé à l'élément INPUT qui renvoie au parent ou conserver une carte en mémoire qui mappe l'élément INPUT créé dynamiquement au parent qui l'a créé. Lorsque vous interceptez la touche Retour, supprimez simplement la relation de la carte afin qu'elle puisse être ajoutée à nouveau si l'utilisateur clique à nouveau dessus.