Проблема выбора родительского элемента?

Question

Мой HTML выглядит примерно так

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

Я назначаю функцию для события onclick текстового поля следующим образом

$(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'));
});

Но это не работает

Answer 1

Попробуйте $(this).parent().attr('id');

Answer 2

Было бы лучше использовать делегирование событий и иметь только один обработчик событий на родительском <div>.Это будет более эффективно за счет уменьшения количества требуемых обработчиков событий и замены потомка и селектора элемента гораздо более простым и быстрым селектором идентификатора.Кроме того, в функции обработчика событий вы автоматически получаете ссылки на оба элемента, которые вас интересуют (через evt.target и this), без необходимости обхода.

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

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

Измените его на следующее

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

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