Create Element With EventListener Dynamically in JavaScript

Question

Hi I am struck with this problem.

I need to create a table with Onclicklisteners dynamically. so i prefered 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);
  }

The Resultant element Structure I am getting is

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

But i need a 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>

Further to notice: I could see that the onclick listener is triggering while creating the element. but its not binding with the element permanently.

What would be the solution.

I prefered to construct DOM structure using appendChild() than by .innerHTML or document.write().

I'm not sure if I understand you right. But registering a click listener with addEventListener/attachEvent would not create an onclick="toggle(week_one)' on the element, why do you need it that way? — t.niese
– t.niese, Commented Jan 12, 2014 at 10:18

scf1001 · Accepted Answer · 2014-01-12 11:15:50Z

The problem is that you're calling the toggleTable function when you attach it. That's why it's being triggered when you create the element.

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

To avoid that it should be:

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

But obviously that doesn't pass in the column to toggle so it's not ideal.

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 you attach a function to the event handler, not the result of a function.

Thank you so much... :) 50+ for u.. ll accept once i set bountry to u

Naif · Accepted Answer · 2014-01-12 10:52:19Z

0

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);
};

answered Jan 12, 2014 at 10:52

Naif

1367 bronze badges

1 Comment

t.niese Over a year ago

This one of the worst ways how this can be achieved.

Collectives™ on Stack Overflow

Create Element With EventListener Dynamically in JavaScript

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related