Question

This is actual code, how do I pass list[i].fnctn correctly to the click handler?

list[i].fnctn – Contains the name of the function that I want to attach to the click event handler.

function createList(list){
    var parentID = $("#content_nav ul");
    var len = list.length;
    for(var i=0;i<len;i++){
        var anchorElement = jQuery('<a />',{text:list[i].text});
        var liElement = jQuery('<li />',{"class":"navlink_"+(i+1),id:"navlink_"+(i+1)});
        //anchorElement.attr('onclick',list[i].fnctn+"()"); - Works fine on desktop browsers but doesn't work on mobile devices. (Mobile devices are my target platform

        anchorElement.on('click',function(event) {
            return window[list[i].fnctn](event); // Here I am getting the error - cannot access property fnctn of undefined
        });
        liElement.append(anchorElement);
        parentID.append(liElement);
    }
}

Answer 1

Would that help, I am not sure if this is possible with the .on() method.

var message = 'Some value that I want to access inside handler function';


$('#myHandler').click({msg: message},function(e){
    alert(e.data.msg);
});

Edited:

As xiaowl mentioned. Changing my code for your scenario.

function myFunction(){
    var message= "Some value that I want to access inside handler function";
    $("#myHandler").on('click', {msg: message}, function(e){
        alert("I want to alert the value - " + e.data.msg);
    });
}

For the actual Condition

function createList(list){
    var parentID = $("#content_nav ul");
    var len = list.length;
    for(var i=0;i<len;i++){
        var anchorElement = jQuery('<a />',{text:list[i].text});
        var liElement = jQuery('<li />',{"class":"navlink_"+(i+1),id:"navlink_"+(i+1)});
        anchorElement.on('click',{myFunction: list[i]}, function(event) {
            return window[event.data.myFunction](event);
        });
        liElement.append(anchorElement);
        parentID.append(liElement);
    }
}