Dynamically created buttons not firing onclick event

Question

Thanks in advance for any help I can get with this one. I'm working on a project which requires me to create buttons out of select options. The buttons are being created without issue, but I can't figure out for the life of me why the onclick trigger isn't firing. I've recoded this in jQuery too and am having the same issue. I'll post both.

JS (with a bit of 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();

The Answer

I wasn't checking for $(document).ready() because I was lead to believe that if you're loading the JS at the bottom of the DOM, it is unnecessary. In this case, it was totally necessary.

Thanks to all those who helped.

[Learn how to **debug** JavaScript](http://www.netmagazine.com/tutorials/javascript-debugging-beginners). — Felix Kling, Jul 30 '13 at 00:08
@FelixKling Looks like I good site, I've bookmarked it to recommend to others. — Barmar, Jul 30 '13 at 00:12
@FelixKling I've debugged down to the point of which I don't understand what's going wrong. This is why I'm reaching out to the community as my peers are also baffled. — vehemoth, Jul 30 '13 at 00:18
Well, there must be an error or something somewhere, because if I just take your `for` loop, it seems to work fine: http://jsfiddle.net/bbjJU/. — Felix Kling, Jul 30 '13 at 00:22
@Barmar The fiddle, it works: http://jsfiddle.net/YZwMG/ I'm at a loss here. — vehemoth, Jul 30 '13 at 00:25
@FelixKling You're right. My only guess at this point is there's something else that's conflicting. Thanks for your help. — vehemoth, Jul 30 '13 at 00:27
I read recently that it wasn't necessary to check for $(document).ready() if you're loading your script at the bottom of the HTML, which I've now learned is incorrect. In this case, the answer was to wrap the function call in the doc ready trigger. Thanks to everyone who tried to help. — vehemoth, Jul 30 '13 at 00:47
*"which I've now learned is incorrect"* No, it *is* correct. Here is your jsFiddle with the code placed at the bottom of the page: http://jsfiddle.net/YZwMG/1/ (which still seems to work). — Felix Kling, Jul 30 '13 at 07:00
@FelixKling Ok, could it be due to a page being bloated because it has too many scripts being loaded? It did solve the issue after all. I appreciate your help. — vehemoth, Jul 30 '13 at 23:19

score 0 · Answer 1 · answered Jul 30 '13 at 07:16

I think jQuery got an easy way to bind dynamically elements. jQuery provides .on() (or .live() for older version) for this.

Example:

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

Dynamically created buttons not firing onclick event

1 Answers1