Unable to get the event target property of a named function

Question

In the fiddle linked below there's some example code I need to troubleshoot. I've simplified it a bit from the original code (didn't write) for demo purposes in the fiddle.

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

How do I get the event.target properties for these items? The console displays:

Uncaught TypeError: Cannot read property 'target' of undefined

I've googled various possible solutions below. They are good but I'm not finding the answer.

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/

If I've missed the answer in those threads, please let me know. Seems this question should be answered somewhere, but I'm having trouble locating it. If not, I'd appreciate some help telling me what is wrong with this code and how to get the event target. Thanks.

FIDDLE LINK

Please don't circumnavigate the warning message. __Links to jsfiddle.net must be accompanied by code.__ — Satpal, Apr 01 '15 at 06:41
@Satpal, I didn't notice a warning. I have no problem posting code, I've been advised in the past when posting to use fiddles or codepen, etc. to display code since it would be easier to debug. Which is why I put the fiddle in the first place. — Chris22, Apr 01 '15 at 06:44

score 3 · Answer 1 · answered Apr 01 '15 at 06:43

Firstly, the each() is redundant code as you can access the index of the clicked element using $(this).index(). Then you simply need to capture the event that was raised in the click handler and pass it to your other functions. Try this:

$(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

Is it not better to use `$("ul li")` instead of `$("ul").children()` as only `li` can be immediate child of `ul` — Satpal, Apr 01 '15 at 06:44
It probably is, I just used the selector the OP had, assuming there was some other logic behind his choice. — Rory McCrossan, Apr 01 '15 at 06:45
@RoryMcCrossan thanks. +1 Yes the original code was using the children selector, so I just copied/pasted. — Chris22, Apr 01 '15 at 06:50

score 2 · Accepted Answer · answered Apr 01 '15 at 06:40

You need to pass the event object as a parameter

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

Demo: Fiddle

Also try

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

Demo: Fiddle

Thanks Arun. I thought I tried that, but I didn't pass the event obj to the click function! Seems I have to wait in order to mark answer — Chris22, Apr 01 '15 at 06:49

score 1 · Answer 3 · answered Apr 01 '15 at 06:43

Pass a event parameter from the click function to your function like this:

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

Unable to get the event target property of a named function

3 Answers3