Question

我在javascript中创建动态网页时遇到了一些问题。

我的想法是阅读一系列事件，并注册人员。我创建一个包含所有事件的页面（每个事件都是一个按钮）并单击其中一个，查看用户列表。

这很好用。但现在，我正在添加一个按钮，将其中一些用户导出到excel文件。我想添加一个带有onClick功能的按钮，如下所示：

...onclick=functionÇ(id_Event, numberOfUsers, listOfUsers)...

javascript生成的html代码内部。我发现一些问题也是这样的，所以我改变了：

var td = document.createElement("td");
var input = document.createElement("input");
input.setAttribute("type","button");
input.setAttribute("value","Exportar a Excel CSV");
input.onclick = function() {
    saveExcelFunctionControl(arrayNumberUsersInEvents[i], response);
};

td.appendChild(input);
document.getElementById("added"+element[i].id_Event).appendChild(td);

我创建了一个名为arrayNumberUSersInEvents的全局数组，我在其中添加了每个可能，人们订阅了。我是每个职位的id计数器。

但即便如此，我在读取firsdt参数的值时会得到一个未定义的内容。我认为这是动态数据的问题，我没有在每次单击按钮时执行我想要的功能。你知道怎么做这样的事吗？

总结一下：我的问题是我想将一些参数传递给动态创建页面中的函数。我不知道如何传递数据并在里面读取正确的参数。

我添加了我的代码，因为有一位用户要求：

for(i = 0; i < element.length; i++){
                                             $(".eventsControl").append(
                                        '<li     id="listControl'+ element[i].id_Event +'">'+
                                    '<a href="#EventControl' + element[i].id_Event + '"' + 'data-transition="slidedown">'+
                                    '<img class="crop" src= "' + element[i].image + '"  />'+
                                    '<h2>' + element[i].name + '</h2>'+
                                    '<p>' + "Desc:  " + element[i].description +'</p>'+
                                    '</a>'+
                                    '</li>'
                                ).listview('refresh');
                         //console.log(response);

                            //BUCLE for setting all users in each event. Better use some string and after, join all of them
                                header = ' <div  width="100%" data-theme = "e" data-role="page" id='+ element[i].id_Event +
                                 ' data-url="EventControl' + element[i].id_Event + '"> ' +
                                 ' <div data-theme = "a" data-role="header"><h1>Lista de Asistencia</h1> ' + 
                                 ' <a href="#controlList" data-icon="back" data-iconpos="notext"></a></div>'+
                                 ' <div data-role="content"> ' + 
                                 ' <fieldset data-role="controlgroup" data-type="horizontal" style="text-align: center">' +
                                 ' <div style="width: 500px; margin: 0 auto;">';

                                 //header = header + '<input data-theme = "c" onclick="saveExcelFunctionControl(this)" id="saveExcelControl' + element[i].id_Event + '" type="button" value = "Guardar a excel"></br>';

                                eval('var numberUsers' +element[i].id_Event + "=1");
                                arrayNumberUsersInEvents[i] = 0; 
                                if(response.length>0){
                                    bucle = ' <table width="100%" border="1" align="left"><tr>'+

                                            ' <th>Nombre</th>'+
                                            ' <th>Primer apellido</th>'+
                                            ' <th>Segundo apellido</th>'+
                                            ' <th>NIF</th>'+
                                            ' <th>Asistencia</th>'+
                                            ' </tr>';

                                    for(iData = 0; iData < response.length; iData++){
                                        if(element[i].id_Event == response[iData].id_Event){
                                            //console.log(response[iData].name);
                                                bucle = bucle + '<tr><td>'+ eval('numberUsers' +element[i].id_Event) +'</td><td>'+ response[iData].name +'</td><td>'+ 
                                                response[iData].surname1 +'</td><td>'+ 
                                                response[iData].surname2 +'</td><td>'+ 
                                                response[iData].NIF + '</td>'+
                                                '<td> '+
                                                    '<input type="checkbox" id="checkBox'+element[i].id_Event+'_'+iData+'" name="option'+iData+'" value="'+iData+'">  '+
                                                '</td>'+


                                                '</tr>';    

                                            eval('numberUsers' +element[i].id_Event + "++");
                                            arrayNumberUsersInEvents[i] = arrayNumberUsersInEvents[i]+1;             
                                        }
                                    }
                                    //header = header + '<input data-theme = "a" onclick="saveExcelFunctionControl(\""element[i].id_Event "\","" + numberUsers + "\",\"" + response+ "\"")" id="saveExcelControl' + element[i].id_Event + '" type="button" value = "Guardar a excel"></br>';
                                    //header = header + '<input data-theme = "a" onclick="saveExcelFunctionControl(""+numberUsers+"")" id="saveExcelControl' + element[i].id_Event + '" type="button" value = "Guardar a excel"></br>';
                                    bucle = bucle + '</table>';
                                    $("#controlList").after(header + bucle + '<div id=added'+element[i].id_Event+'></div>');


var td = document.createElement("td");
var input = document.createElement("input");
input.setAttribute("type","button");
input.setAttribute("value","Exportar a Excel CSV");
input.onclick = function() {
    saveExcelFunctionControl(arrayNumberUsersInEvents[i], response);
};

td.appendChild(input);
document.getElementById("added"+element[i].id_Event).appendChild(td);


                                }


                }

                },
       error: function(xhr, status, message) { alert("Status: " + status + "\nControlGetEventsRegister: " + message); }
    });

Answer 1

您可以使用闭包将参数传递给动态创建的onclick处理程序：

input.onclick = (function() {
    var arr = arrayNumberUsersInEvents[i];
    var resp = response;
    return function() {
        saveExcelFunctionControl(arr, resp);
    }
})();

How do JavaScript closures work?

Answer 2

var td = document.createElement("td");
var input = "<input type='button' value='Exportar a Excel CSV'";
input+= "onclick='saveExcelFunctionControl(""" +arrayNumberUsersInEvents[i]+""","""+ response+""");' />";

};

td.textContent=input;
document.getElementById("added"+element[i].id_Event).appendChild(td);

试试这种方式

在javascript中将值传递给动态创建的函数

2 个答案: