在JavaScript中动态创建元素使用EventListener创建元素

嗨我很惊讶这个问题。在JavaScript中动态创建元素使用EventListener创建元素

我需要创建一个表与Onclicklisteners动态。所以我喜欢这种方式。

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

我得到得到的元件结构

<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> 
     <th> 
       <span onclick="toggle(week_two)'>week_two</span> 
     </th> 
     </tr> 
    </table>

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

什么是解决方案。

我者优先构建使用的appendChild（） DOM结构比.innerHTML或document.write（）的。

来源

2014-01-12 sam

我不确定我是否理解你的权利。但是用'addEventListener' /'attachEvent'注册'click'监听器不会在元素上创建'onclick =“开关（'week_one'）'，为什么你需要这种方式呢？ –

问题是，您在附加它时调用toggleTable函数。这就是创建元素时被触发的原因。

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

为了避免这种情况，应该是：

span_ele.addEventListener('click', toggletable, 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[i])); 
     } 
     span_ele.appendChild(document.createTextNode(column_list[i])) 
     cell.appendChild(span_ele); 
     row.appendChild(cell); 
    } 
    menu_table.appendChild(row); 
    }

你需要确保你附加功能，事件处理程序，而不是一个函数的结果。

来源

2014-01-12 11:15:50 scf1001

非常感谢你...... :) 50+对你..只要接受一次， – sam

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

来源

2014-01-12 10:52:19

这是最糟糕的方式之一可以实现 –

在JavaScript中动态创建元素使用EventListener创建元素

回答

相关问题