動態創建的按鈕不會觸發onclick事件

在此先感謝您爲我提供的任何幫助。我正在開發一個項目，該項目需要我從選擇選項中創建按鈕。這些按鈕的創建沒有問題，但我無法弄清楚爲什麼onclick觸發器沒有觸發。我在jQuery中也記錄了這一點，並且遇到同樣的問題。我會發布兩個。動態創建的按鈕不會觸發onclick事件

JS（有一點的JS）：

var buttonObj = { 
    addButtons: function() { 
     $('select').each(function() { 
      // Check that buttons don't already exist 
      var selectBox = $(this); 
      if(!selectBox.parent().next().hasClass('button-group')) { 
       // Create button div 
       var buttonGroup = document.createElement('div'); 
       buttonGroup.className = 'button-group'; 
       // Check which type of button to create 
       var buttonLen = selectBox.children().length; 
       if(buttonLen > 3) { 
        // Long button classes 
        var buttonClass = 'decision-button long'; 
       } else { 
        // Short button classes 
        var buttonClass = 'decision-button'; 
       } 
       selectBox.parent().parent().append(buttonGroup); 
       // Create Buttons 
       for(var i = 1; i < buttonLen; i++) { 
        var newButton = document.createElement('button');     
        newButton.className = buttonClass; 
        newButton.type = "button"; 
        newButton.innerHTML = selectBox.children().eq(i).html(); 
        buttonGroup.appendChild(newButton); 
        newButton.onclick = function() { 
         alert($(this)); 
         $(this).siblings().removeClass('selected'); 
         $(this).addClass('selected'); 
        }   
       } 
      } else { 
       console.log('do nothing'); 
      } 
     }); 
    } 
} 

buttonObj.addButtons();

答案

我不是爲$（文件）。就緒（）檢查，因爲我是鉛相信，如果你正在加載DOM底部的JS，這是沒有必要的。在這種情況下，這是完全必要的。

感謝所有幫助過的人。

來源

2013-07-30 vehemoth

[瞭解如何** **調試的JavaScript（http://www.netmagazine.com/tutorials/javascript-debugging-beginners）。 –

@FelixKling看起來我是個不錯的網站，我已經把它加入書籤推薦給其他人。 – Barmar

你可以做一個證明問題的jsfiddle嗎？ – Barmar

我認爲jQuery有一個簡單的方法來動態綁定元素。 jQuery爲此提供了.on()（或.live()舊版本）。

實施例：

jQuery(document).ready(function(){ 
    var btnClass=".someClass"; 
    $(document).on('click',btnClass,function(e){  
     alert($(this)); 
     $(this).siblings().removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 
});

來源

2013-07-30 07:16:57

動態創建的按鈕不會觸發onclick事件

回答

相關問題