Geek Answers Handbook

Create an element with an EventListener dynamically in JavaScript

Hi, this problem hit me.

I need to create a dynamic table with Onclicklisteners . therefore, I prefer this way.

function create_weekmenu(json) { var column_list=json.week_list; var menu_table=document.getElementById("weekmenu"); var row=document.createElement('tr'); for(var i=0;i<column_list.length;i++) { var cell=document.createElement('th'); var span_ele=document.createElement('span'); if(span_ele.addEventListener) { span_ele.addEventListener('click', toggletable(column_list[i]),true); } else if(span_ele.attachEvent) { // IE < 9 :( span_ele.attachEvent('onclick', toggletable(column_list[i])); } span_ele.appendChild(document.createTextNode(column_list[i])) cell.appendChild(span_ele); row.appendChild(cell); } menu_table.appendChild(row); }

Resulting element The structure I get

 <table id="weekmenu"> <tr> <th> <span>week_one</span> </th> <th> <span>week_two</span> </th> </tr> </table>

But I need an element structure like this,

  <table id="weekmenu"> <tr> <th> <span onclick="toggle(week_one)'>week_one</span> </th> <th> <span onclick="toggle(week_two)'>week_two</span> </th> </tr> </table>

Also, to notice:, I could see that when creating the item, the onclick listener is started. but not necessarily snapped to an element.

What will be the solution.

I preferred to build the DOM structure using appendChild () than .innerHTML or document.write () .

+6
source share
2 answers

The problem is that you are calling the toggleTable function when you attach it. That is why it works when creating an element.

 span_ele.addEventListener('click', toggletable(column_list[i]),true);

To avoid this, you need to:

 span_ele.addEventListener('click', toggletable, true);

But obviously this does not go in the column for switching, so it is not perfect.

I would use something like:

 function create_weekmenu(json) { var column_list=json.week_list; var menu_table=document.getElementById("weekmenu"); var row=document.createElement('tr'); for(var i=0;i<column_list.length;i++) { var cell=document.createElement('th'); var span_ele=document.createElement('span'); if(span_ele.addEventListener) { span_ele.addEventListener('click', function(col) { return function() { toggletable(col); } }(column_list[i]),true); } else if(span_ele.attachEvent) { // IE < 9 :( span_ele.attachEvent('onclick', function(col) { return function() { toggletable(col); } }(column_list[i])); } span_ele.appendChild(document.createTextNode(column_list[i])) cell.appendChild(span_ele); row.appendChild(cell); } menu_table.appendChild(row); }

You need to make sure that you attach the function to the event handler and not to the result of the function.

+3
source 
 function create_weekmenu(json) { var column_list = json.week_list; var menu_table = document.getElementById("weekmenu"); var row = document.createElement('tr'); for (var i = 0; i < column_list.length; i++) { var cell = document.createElement('th'); var span_ele = document.createElement('span'); span_ele.setAttribute('onclick', 'toggletable(column_list[' + i + '])'); span_ele.appendChild(document.createTextNode(column_list[i])) cell.appendChild(span_ele); row.appendChild(cell); } menu_table.appendChild(row); };
0
source

More articles:


All Articles