動態激活自定義類按鈕

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

動態激活自定義類按鈕

回答

相關問題