カスタムクラスボタンを動的にアクティブにする

Question

私はすべての属性を設定し、自分のページに表示するボタンを動的に作成するためにjavascriptを使用しています。次に、jQueryを使用して、ホバーとクリックロジックを実装して、ボタンのクラスのレイアウトを変更します。ボタンが作成されると、それはクラスレイアウトになりますが、上に移動したりクリックしたりすると、ランタイムの前に作成するように変更されません。

javasciptコード：HTMLで

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

：

<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

Uは、デリゲートメソッドを使用することができます。（createbutton、 'クリック'、 'ボタン'）に $（ '＃コンテナを'）;

Answer 3

.hover()や.mousedown()のようなイベントリスナーには依存しないでください。 ランタイムに既に存在する要素にリスナを添付するだけです。ランタイムyoutボタンは、機能createbutton()が後で呼び出されるまで、まだ存在しません。すぐに使用する予定のある.live().を使用するか、オールインワン.on()と.off()の方法に慣れてください。