0

在此先感谢您提供的任何帮助。我正在做一个项目，该项目需要我从选择的选项中创建按钮。按钮的创建没有问题，但我一生都无法弄清楚为什么 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，这是不必要的。在这种情况下，这是完全必要的。

感谢所有帮助过的人。

4

1 回答 1

0

我认为 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-30T07:16:57.487 回答