Невозможно получить целевое свойство события с именованной функцией

Question

В приведенной ниже скрипте есть пример кода, который мне нужен для устранения неполадок. Я немного упростил его из исходного кода (не писал) для демонстрационных целей в скрипке.

$(document).ready(function(){ 
    $("ul").children().each(function(i){ 
     $(this).click(function(){ 
      var indexItem = i; 

      if(indexItem == 0){ 
       displayId();         
      } 
      if(indexItem == 1){ 
       displayNode(); 
      } 
      if(indexItem == 2){ 
       displayNodevalue(); 
      } 
     }); 
    }); 
}) 
function displayId(event){ 
    // below returns undefined not what I want 
    // var $listID = jQuery(this).attr("id"); 
    var $listID = event.target.id; 
    alert($listID); 
} 

function displayNode(event){ 
    var listNodename = event.target.nodeName; 
    alert(listNodename); 
} 

function displayNodevalue(event){ 
    var listValue = event.target.nodeValue; 
    alert(listValue); 
} 

Как мне получить свойства event.target для этих элементов? Консоль отображает:

Uncaught TypeError: Cannot read property 'target' of undefined

Я гугл различных возможных решения ниже. Они хорошие, но я не нахожу ответа.

How to pass the event object to a named function

Getting the ID of the element that fired an event

https://api.jquery.com/event.target/

Если я пропустил ответ в этих потоках, пожалуйста, дайте мне знать. Кажется, на этот вопрос нужно ответить, но у меня проблемы с его поиском. Если нет, я был бы признателен за некоторую помощь, которая сообщила бы мне, что не так с этим кодом и как получить цель мероприятия. Благодарю.

FIDDLE LINK

Answer 1

Вы должны передать объект события в качестве параметра

$(document).ready(function() { 
    $("ul").children().each(function (i) { 
     $(this).click(function (e) { 
      var indexItem = i; 

      if (indexItem == 0) { 
       displayId(e); 
      } 
      if (indexItem == 1) { 
       displayNode(e); 
      } 
      if (indexItem == 2) { 
       displayNodevalue(); 
      } 
     }); 
    }); 
}) 

Демо: Fiddle

---

Также попробуйте

$(document).ready(function() { 
    var fns = [displayId, displayNode, displayNodevalue] 
    $("ul").children().click(function (e) { 
     var indexItem = $(this).index(); 
     fns[indexItem] ? fns[indexItem](e) : ''; 
    }); 
}) 

Demo: Fiddle

Answer 2

Во-первых, each() избыточна код, как вы можете получить доступ к index из щелкнули элемента с помощью $(this).index(). Затем вам просто нужно зафиксировать событие, которое было создано в обработчике кликов, и передать его другим функциям. Попробуйте это:

$(document).ready(function() { 
    $("ul").children().click(function (e) { 
     var indexItem = $(this).index(); 

     if (indexItem == 0) { 
      displayId(e); 
     } 
     if (indexItem == 1) { 
      displayNode(e); 
     } 
     if (indexItem == 2) { 
      displayNodevalue(e); 
     } 
    }); 
}) 

function displayId(e) { 
    var $listID = e.target.id; 
    alert($listID); 
} 

function displayNode(e) { 
    var listNodename = e.target.nodeName; 
    alert(listNodename); 
} 

function displayNodevalue(e) { 
    var listValue = e.target.nodeValue; 
    alert(listValue); 
} 

Updated fiddle

Answer 3

Передайте параметр события из функции мыши к вашей функции, как это:

$(this).click(function (event) { 
    var indexItem = i; 
    if (indexItem == 0) { 
    displayId(event); 
    } 
    if (indexItem == 1) { 
    displayNode(event); 
    } 
    if (indexItem == 2) { 
    displayNodevalue(); 
    } 
});