Question

I am writing a menu system and I need to call a function when the user clicks on a specific row. I am using new function to pass the div that called the function as well as the row the user clicked on. All well and good until I try to pass a local array to the function. If I do the following:

for (i=0;i<tmpdropnumber;i++){
    var dv=document.getElementById(id+i);
    dv.style.cursor="pointer";  
    dv.onmouseover = new Function('dropover'+"('" + id + "','" + i + "')");
    dv.onmouseout = new Function('dropout'+"('" + id + "','" + i + "')");
    dv.onclick = new Function('dropclick'+"('" + id + "','" + i + "','"+tmparray1+"','"+tmparray2+"')");
}

As you’d expect the arrays are passed as strings. I could rebuild the arrays in the function but that seems inelegant.

if I try the following:

for (i=0;i<tmpdropnumber;i++){
    var dv=document.getElementById(id+i);
    dv.style.cursor="pointer";  
    dv.onmouseover = new Function('dropover'+"('" + id + "','" + i + "')");
    dv.onmouseout = new Function('dropout'+"('" + id + "','" + i + "')");
    dv.onclick = new Function('dropclick'+"('" + id + "','" + i + "',"+tmparray1+","+tmparray2+")");
}

Trying to pass the arrays it crashes. Any ideas on how I can achieve this? I am using jquery in my code so wither a javascript or jquery solution would be fine.

Answer 1

Do not use new Function.

You are having problems because when the string is being built, the array is being turned into a string.

basic idea to get around the toString()

for (i=0;i<tmpdropnumber;i++){
    var dv=document.getElementById(id+i);
    dv.style.cursor="pointer";
    (function(id, i){  
        dv.onmouseover = function(){ dropover(id,i); };
        dv.onmouseout = function(){ dropout(id,i); };
        dv.onclick = function(){ dropclick(id,i, tmparray1, tmparray2); };
    })(id,i);
}

But in reality there is no need to pass in an object, id.

You can always use this to get the current row and there is rowIndex on the table. Heck you can have one event handler on the table and use handlers on the table/tbody to capture the bubbling and use target/srcElement.