Передача значения динамической созданной функции в javascript

Question

У меня возникают некоторые проблемы при создании динамической веб-страницы в javascript.

Моя идея - прочитать список событий, и люди подписались на них. Я создаю страницу со всеми событиями (каждое событие является кнопкой) и нажимая на один из них, см. Список пользователей.

Это прекрасно работает. Но теперь я добавляю кнопку для экспорта некоторых из этих пользователей в файл excel. И я хочу, чтобы добавить кнопку с функцией OnClick, как это:

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

Внутри HTML кода, сгенерированного JavaScript. Я нашел некоторые проблемы и делать так, чтобы я изменился так:

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, в котором я добавляю в каждом possition, люди подписались. i, является счетчиком id для каждой позиции.

Но даже это, я получаю undefined при чтении значения параметра 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); 

попробуйте этот способ