动态激活自定义类按钮

我正在使用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)');

来源

2012-04-03 Glenn

你应该通过JSLint运行你的JS，并考虑你得到的建议。 – ANeves 2012-04-03 12:49:29

您需要设置事件委派，以便事件处理程序识别动态生成的元素。基本原理是你将事件处理器设置在一个静态元素上（当页面被加载时存在，并且将一直存在），它将包含你想要触发回调函数的所有元素 - 如果没有在你的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()函数。

来源

2012-04-03 12:01:50

是的我正在使用jQuery 1.7并且使用你的建议来改变jQuery函数。虽然同样的问题仍然存在，我将用更新的函数编辑我的问题。 – Glenn 2012-04-03 12:26:34

@Glenn你可以创建一个[jsFiddle]（http://jsfiddle.net）来演示这个问题吗？ – 2012-04-03 13:33:29

我希望这是好的：http://jsfiddle.net/6h7fm/ - 感谢您的时间！ – Glenn 2012-04-03 13:53:09

U可以使用委托方法： $（ '＃集装箱'）上（ '点击'， '按钮'，createbutton）;

来源

2012-04-03 11:50:00 sneeky

您不应该依赖事件侦听器，如.hover()或.mousedown()。 它们只将侦听器附加到运行时已存在的元素。运行时间yout按钮不存在，直到稍后调用功能createbutton()。您应该使用即将被弃用的.live().或习惯于所有功能于一身的.on()和.off()方法。

来源

2012-04-03 12:07:03 keystorm

“即将被弃用”？ jQuery 1.7已经有一段时间了，它已经被弃用了。 – 2012-04-03 12:11:10

动态激活自定义类按钮

回答

相关问题