jQuery .on with .get methods

Question

Я пытаюсь получить имя тега элемента, щелкнув внутри li, когда пользователь нажимает на элемент. Элемент li динамически добавляется в HTML-код. Для этого я использую код ниже, однако он, похоже, не работает.

$('li *','div#contentWrapper').on('click','#interfaceContainer #left #sortableTestComponents li',function(e){ 
     e.stopPropagation(); 
     var domEl = $(this).get(0); 
     alert(domEl.tagName); 
     if(!$(event.target).hasClass("deleteTestComp")){ 
      var type = $(this).find('div.headerName').html(); 
      var information = $(this).find('input[type=hidden]').val(); 

      if(type == "CliSessionType"){ 
       parseCliComponent(information); 
      } 
      else if(type == "DBSessionType"){ 
       parseDbComponent(information); 
      } 
      else{ 
       parseScreenComponent(information); 
      } 
     } 
    }); 

Почему мой код не работает? Ничего не происходит, когда пользователь нажимает на элемент.

JSFiddle - http://jsfiddle.net/3FxQE/

Answer 1

Поскольку вы заинтересованы в click событий в li элементов которых подпадает под #interfaceContainer, регистрация событие должно быть $('#interfaceContainer').on('click','li',function(e){...});

Тогда, чтобы получить tagName, вам нужно использовать фактический источник о событии это доступно в e.target, поэтому вам нужно использовать $(e.target).get(0), чтобы получить элемент clicked dom.

$('#interfaceContainer').on('click','li',function(e){ 
    e.stopPropagation(); 
    var domEl = $(e.target).get(0); 
    alert(domEl.tagName); 
    if(!$(event.target).hasClass("deleteTestComp")){ 
     var type = $(this).find('div.headerName').html(); 
     var information = $(this).find('input[type=hidden]').val(); 

     if(type == "CliSessionType"){ 
      parseCliComponent(information); 
     } 
     else if(type == "DBSessionType"){ 
      parseDbComponent(information); 
     } 
     else{ 
      parseScreenComponent(information); 
     } 
    } 
}); 

Демо: Fiddle

Answer 2

Вы пытаетесь использовать контекст, в котором вам не нужно, в вашем селекторе. Изменение $('li *','div#contentWrapper') с $('div#contentWrapper') и $(event.target) с $(e.target). Рабочая скрипку here

$('div#contentWrapper').on('click', '#interfaceContainer #left #sortableTestComponents li', function (e) { 
    e.stopPropagation(); 
    var $this = $(this), 
     domEl = $this.get(0); 
    alert(domEl.tagName); 
    if (!$(e.target).hasClass("deleteTestComp")) { 
     var type = $this.find('div.headerName').html(), 
      information = $this.find('input[type=hidden]').val(); 

     if (type == "CliSessionType") { 
      parseCliComponent(information); 
     } else if (type == "DBSessionType") { 
      parseDbComponent(information); 
     } else { 
      parseScreenComponent(information); 
     } 
    } 
});