jquery - 動的に生成されたコンテンツにjqueryUIメソッドを適用する方法

Question

誰かが私のウェブアプリで動的に生成されたコンテンツにjqueryUIメソッドを適用するのを手伝ってくれますか？ここでのこのコンテンツは、ajax呼び出しによって動的に生成されます-：

<div class="streamOptionsContainer">
<button id="delete_post" title="Delete Post"></button>
</div>

問題は、jqueryUIメソッドを使用する場合：-

$("button[id=delete_post]").button();

動的に生成されたボタンでは機能しませんが、上記のjqueryUIメソッドはすべての静的コンテンツに対して機能します。

Answer 1

.on()メソッドを使用します。

$("button[id=delete_post]").on("load", function(){
    $(this).button();
});

IDを使用しているため、次のように実行できます。

$("#delete_post").on("load", function(){
    $(this).button();
});

また、ajax呼び出しの後にロードする場合は、そのsuccess:中で関数を使用できます。

$.ajax({
    success: function(){
        $("#delete_post").button();
    }
});

間違っている場合は構文を修正してください。:)

Answer 2

この問題は、ブートストラップが原因である可能性があります（使用している場合）。$.fn.buttonブートストラップは独自のメソッドで書き換えます。しかし、これは修正されています。bootstrap.jsのコードを見てください

var old = $.fn.button

$.fn.button = function (option) {
 return this.each(function () {
   var $this = $(this)
     , data = $this.data('button')
     , options = typeof option == 'object' && option
   if (!data) $this.data('button', (data = new Button(this, options)))
   if (option == 'toggle') data.toggle()
   else if (option) data.setState(option)
 })
}

...

$.fn.button.noConflict = function () {
  $.fn.button = old
  return this
}

したがって、要素$.fn.button.noConflict();を呼び出すことでjQueryUiButtonを使用できるようにするために作成する必要があり.button()ます。

Answer 3

使用してみてください：

$('#delete_post').button();