Problème de sélection d'élément parent?

Question

Mon HTML est quelque chose comme ça

<div id="mydiv" class="common"> 
     <input type="text" id="text1" value="" /> 
     <input type="text" id="text2" value="" /> 
</div> 

J'assignant une fonction sur l'événement onclick de la zone de texte comme celui-ci

$(document).ready(function() { 
     $(".common input").click(function() { 

      //////// What I am trying to do is access the id of its parent 
       // in this case it is "mydiv" 
      alert($(this:parent).attr('id')); 
}); 

Mais il ne fonctionne pas

Answer 1

Essayez $(this).parent().attr('id');

Answer 2

Changez-le pour le suivant

$(document).ready(function() { 
     $(".common input").click(function() { 

     var divId = $(this).parent().attr('id')); 
     alert(divId); 
}); 

Answer 3

$(document).ready(function() { 
    $(".common input").click(function() { 
     alert($(this).parent().attr('id')); // <- Use $(this).parent() 
    }); // <- don't forget to close this function too 
}); 

Answer 4

Vous seriez mieux d'utiliser la délégation de l'événement et avoir un seul gestionnaire d'événements sur le parent <div>. Cela sera plus efficace en réduisant le nombre de gestionnaires d'événements requis et en remplaçant le sélecteur de descendant et d'élément par le sélecteur d'identification beaucoup plus simple et plus rapide. De plus, dans la fonction gestionnaire d'événements, vous avez automatiquement des références aux deux éléments qui vous intéressent (via evt.target et this) sans avoir à effectuer de parcours.

$(document).ready(function() { 
    $("#mydiv").click(function(evt) { 
     if (evt.target.tagName.toLowerCase() == "input") { 
      alert("Clicked input with ID " + evt.target.id); 
      alert("Parent ID: " + this.id); 
     } 
    }); 
});