在JavaScript中动态创建使用EventListener的元素 [英] Create Element With EventListener Dynamically in JavaScript

问题描述

您好，我对这个问题感到震惊。

我需要动态创建一个带有Onclicklisteners的表。所以我喜欢这种方式。
$ b

 函数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）; 
} 
  

我得到的结果元素结构是

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

但是我需要像这样的元素结构，

 < table id =weekmenu> 
< tr> 
< th> 
< span onclick =toggle（week_one）> week_one< / span> 
< / th> 
 <的第i; 
 < / th> 
< / tr> 
< / table> 
  

进一步注意：我可以看到onclick监听器在创建时触发元素，但它不与元素永久绑定。

什么是解决方案。

我最喜欢使用 appendChild（）而不是 .innerHTML 或 document.write（）构造DOM结构。

解决方案

问题在于，您在附加时调用toggleTable函数，这就是为什么当您创建元素时触发toggleTable。

  span_ele.addEventListener（'click'，toggletable（column_list [i]），true）; 
  

为避免它应该是：

pre $ span_ele.addEventListener（'点击'，转到letable，true）;


但很明显，在列中没有通过切换，所以它并不理想。

我会使用类似于：

  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 （$ cell $）
 
 span_ele.appendChild（document.createTextNode（column_list [i]））
 cell.appendChild（span_ele）; 
 row.appendChild（cell） ; 
} 
 menu_table.appendChild（row）; 
} 
  

您需要确保将一个函数附加到事件处理函数中，而不是函数的结果。

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().

解决方案

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.

这篇关于在JavaScript中动态创建使用EventListener的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！