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()（或.live()旧版本）。

示例：

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

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

1 个答案: