Question

I’m using javascript to dynamically create a button where I set all the attributes and show it on my page. Then using jQuery I implement hover and click logic to change the layout of the button’s class. When the button is created it’s class layout is what it should be, but when hovered over or clicked it does not change like it does when I create it before runtime.

The javascipt code:

function createbutton()
{
var btn = document.createElement("input");
btn.setAttribute("type", "button");
btn.setAttribute("class", "fg-button ui-state-default ui-corner-all");
btn.setAttribute("value", "click!");
btn.setAttribute("onclick", "createbutton()");

theParent = document.getElementById("content");
theParent.appendChild(btn);
}
$(function(){
    //all hover and click logic for buttons     
    $(".fg-button:not(.ui-state-disabled)")
    .hover(
        function(){ 
            $(this).addClass("ui-state-hover"); 
        },
        function(){ 
            $(this).removeClass("ui-state-hover"); 
        }
    )
    .mousedown(function(){
            $(this).parents('.fg-buttonset-single:first').find(".fg-button.ui-state-active").removeClass("ui-state-active");
            if( $(this).is('.ui-state-active.fg-button-toggleable, .fg-buttonset-multi .ui-state-active') ){ $(this).removeClass("ui-state-active"); }
            else { $(this).addClass("ui-state-active"); }   
    })
    .mouseup(function(){
        if(! $(this).is('.fg-button-toggleable, .fg-buttonset-single .fg-button,  .fg-buttonset-multi .fg-button') ){
            $(this).removeClass("ui-state-active");
        }
    });
});

In HTML:

<input type="button" onclick="createbutton()" value="CLICK" >
<div id="content">
</div>

Is there another attribute I should set, or should I do something else to activate the jQuery function when the button is created?

Edit(updated function):

$('body').on(
{
    mousedown: function() 
    {
        $(this).parents('.fg-buttonset-single:first').find(".fg-button.ui-state-active").removeClass("ui-state-active");
        if( $(this).is('.ui-state-active.fg-button-toggleable, .fg-buttonset-multi .ui-state-active') ){ $(this).removeClass("ui-state-active"); }
        else { $(this).addClass("ui-state-active"); }

    },
    mouseup: function() 
    {
        if(! $(this).is('.fg-button-toggleable, .fg-buttonset-single .fg-button,  .fg-buttonset-multi .fg-button') ){$(this).removeClass("ui-state-active");}
    },
    mouseenter: function()
    {
        $(this).addClass("ui-state-hover"); 
    },
    mouseleave: function()
    {
        $(this).removeClass("ui-state-hover"); 
    }       
}, '.fg-button:not(.ui-state-disabled)');

Answer 1

You’ll need to set up event delegation so that dynamically generated elements are recognised by the event handler. The basic principle is that you set the event handler on a static element (one that exists when the page is loaded, and will always exist) that will contain all of the elements you want to trigger the callback function – if there isn’t a suitable container element defined in your HTML, you can use the body, though the more specific you can be the better.

If you’re using jQuery 1.7+, you’ll want the .on() function. Since you’re binding multiple events, you’d be best off using the event map syntax:

$('body').on({
    mousedown: function() {

    },
    mouseup: function() {

    },
    ...
}, '.fg-button:not(.ui-state-disabled)');

Note that hover isn’t an actual event, the function is just a shorthand for binding to two different events (mouseenter and mouseleave).

If you’re using a version prior to jQuery 1.7, take a look at the .delegate() function instead.