Javascript 动态激活自定义类按钮

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

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>

---

您可以使用委托方法：

---

$（“#容器”）。在（'click'，'button'，createbutton'）

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

主体

，虽然越具体越好

如果您使用的是jQuery1.7+，则需要该函数。由于要绑定多个事件，最好使用事件映射语法：

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

    },
    mouseup: function() {

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

请注意，

hover

不是实际事件，该函数只是绑定到两个不同事件（

mouseenter

和

mouseleave

）的缩写

---

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

您不应该依赖事件侦听器，如

.hover（）

或

.mousedown（）

它们仅将侦听器附加到运行时上已存在的元素。在运行时，yout按钮还不存在，直到稍后调用函数

createbutton（）

。您应该使用即将被弃用的

.live（）。

或习惯于一体式

.on（）

和

.off（）

方法

“即将被弃用”？jQuery1.7已经存在一段时间了，它已经非常不受欢迎了。是的，我正在使用jQuery1.7，并根据您的建议更改jQuery函数。但同样的问题仍然存在，我将用更新的函数编辑我的问题。@Glenn您能创建一个演示问题的函数吗？@Glenn JSFIDLE中的HTML与您实际页面上的HTML相同吗？jQuery代码正在寻找不存在的父元素，这似乎会导致问题。嗯，你说得对！我用以前的工作函数对它进行了更新，并编辑了html以显示我正在尝试做什么：我真的不知道应该如何将标准jQuery函数实现到.on（）中function@Glenn这（minorly更新）似乎有效。我用Firebug检查了按钮元素，并根据正确的事件添加或删除了类。不确定你希望发生什么，不是，但是绑定事件处理程序的代码是正确的。你应该通过JSLLT运行你的JS，并考虑你得到的建议。

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

    },
    mouseup: function() {

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