动态创建的按钮不会触发onclick事件

Question

在此先感谢您提供的任何帮助。 我正在做一个项目，该项目需要我从选择选项中创建按钮。 这些按钮的创建没有问题，但是我无法确定为什么onclick触发器没有触发。 我也在jQuery中重新编码过，并且遇到了同样的问题。 我都会发布。

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

答案

我之所以没有检查$（document）.ready（），是因为我相信如果您要在DOM的底部加载JS，则没有必要。 在这种情况下，这是完全必要的。

感谢所有提供帮助的人。

Answer 1

我认为jQuery有一种简单的方法来动态绑定元素。 jQuery .on()提供了.on() （或对于较早版本的.live() ）。

例：

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