在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創建元素

回答

相關問題