Question

嗨，我很震惊这个问题。

我需要动态创建一个带有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（）而不是 .innerHTML 或 document.write（）来构建DOM结构。

Answer 1

问题是你在附加时调用了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);
  }

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

Answer 2

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

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

2 个答案: