2014-09-06 3 views
2

Я пытаюсь захватить идентификатор элемента, который щелкнут, когда пользователь нажимает на элемент, который позволяет ему покинуть страницу. Идея состоит в том, чтобы затем записать это с помощью Ajax. Кажется, что скрипт работает нормально, пока элемент имеет идентификатор, но он, похоже, не может подняться на DOM, чтобы найти идентификатор предка, если он этого не сделал. Что я делаю не так?jQuery идентификатор захвата элемента clicked

$(document).ready(function(){ 
    $('a, button, input[type=submit]').on('click', function (event) { 
     if (event.target.id == '') 
      alert($(this).closest('[id!=""]').attr('id')); 

     else 
      alert(event.target.id); 
    }); 
}); 
+1

Код отлично работает здесь, http://jsfiddle.net/BrianDillingham/bg91uqpm/, возможно, как его привязка к событию –

+0

@Brian это работает неправильно, если атрибут id отсутствует на кликнике в качестве кода только проверки на пустую строку –

+0

Это работает в моей демонстрации –

ответ

1

, если идентификатор родителя не определен или элемент вложен так много, что вы не можете рассчитывать как многие родители у него есть, т. е. получить идентификатор ближайшего родителя, который на самом деле имеет идентификатор, тогда этот код выполнит эту работу для вас: DEMO

$(document).on('click', 'a, button, [type="submit"]', function() { 

    if($(this).attr('id') === undefined || $(this).attr('id') === null) { 
     alert($(this).parents().filter(function(){ 
      return $(this).attr('id')!=undefined && $(this).attr('id')!=null; 
     }).attr('id')); 
    } else { 
     alert($(this).attr('id')); 
    } 

}); 
+0

Блестящий, спасибо! –

+0

добро пожаловать;) –

1

Я считаю, что это будет рекурсивно найти идентификаторы

$(document).on('click', 'a, button, [type="submit"]', function() { 

    findID($(this)); 

}); 

function findID(element) { 
    if(element.attr('id') === undefined || element.attr('id') === null) { 
     var temp = element.parent().attr('id'); 
     if(temp === undefined || temp === null){ 
      findID(element.parent()); 
     } else { 
      alert(temp); 
     } 
    } else { 
     alert(element.attr('id')); 
    } 
} 

DEMO

+0

Что делать, если родительский элемент тоже не имеет идентификатора? –

+0

Затем вам нужно рекурсивно проанализировать элемент DOM с помощью функции. Но я считаю, что это выходит за рамки этого вопроса. – cs1193

+0

Наоборот, я считаю, что это именно то, что просит ОП, чтобы найти ближайший контейнер с идентификатором, поэтому есть что-то, чтобы зарегистрировать –

1

Вот способ искать рекурсивно через DOM для ID attribut:

$(document).ready(function() { 
     $('a, button, input[type=submit]').on('click', function (event) {    
      getID($(this)); 
     }); 

     function getID(element) { 
      if (element.attr('id') && element.attr('id') !== "") { 
       alert(element.attr('id')); 
      } else if (element.parent()) { 
       getID(element.parent()); 
      } 
     } 
    }); 
1

вопросов с вашим кодом является то, что вы только проверить, если атрибут идентификатора щелкнутого элемента пуст но вы не проверяете, действительно ли он присутствует. Кроме того, кажется, что селектор [id!=""] не работает правильно, но я обнаружил, что добавление [id] до того, чтобы заставить элемент иметь идентификатор делает его работу, поэтому более кратким решением было бы это:

$(document).ready(function(){ 
    $('a, button, input[type=submit]').on('click', function() { 
     var id = this.id ? this.id : $(this).closest('[id][id!=""]').attr('id'); 
     alert(id); 
    }); 
}); 

Demo fiddle

Смежные вопросы