Question

我正在使用javascript动态创建一个按钮，我设置所有属性并在我的页面上显示它。然后使用jQuery我实现悬停并单击逻辑来更改按钮类的布局。创建按钮时，它的类布局就是它应该是什么，但是当它悬停或单击时，它不会像在运行时创建它时那样改变。

javascipt代码：

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");
        }
    });
});

在HTML中：

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

我应该设置另一个属性，还是应该在创建按钮时激活jQuery函数？

编辑（更新的功能）：

$('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

您需要设置事件委派，以便事件处理程序识别动态生成的元素。基本原则是你在一个静态元素上设置事件处理程序（一个在加载页面时存在，并且将始终存在的元素），它将包含你想要触发回调函数的所有元素 - 如果没有在您的HTML中定义的合适的容器元素，您可以使用body，尽管您可以使用更具体的更好。

如果您使用的是jQuery 1.7+，则需要.on()功能。由于您要绑定多个事件，因此最好使用事件映射语法：

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

    },
    mouseup: function() {

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

请注意，hover不是实际事件，该函数只是绑定到两个不同事件（mouseenter和mouseleave）的简写。

如果您使用的是jQuery 1.7之前的版本，请查看.delegate()函数。

Answer 2

你可以使用委托方法： $（'＃container'）。on（'click'，'button'，createbutton）;

Answer 3

您不应该依赖.hover()或.mousedown()等事件监听器。 它们只将侦听器附加到运行时已存在的元素。在运行时，yout按钮尚不存在，直到稍后调用函数createbutton()。您应该使用即将弃用的.live().，或者习惯使用一体化.on()和.off()方法。

动态激活自定义类按钮

3 个答案: