jquery - 如何在动态生成的内容上应用 jqueryUI 方法

Question

有没有人可以帮助我将 jqueryUI 方法应用于我的 webapp 中动态生成的内容。这里的内容是通过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

此问题可能是由引导程序引起的（如果您使用它）。Bootstrap$.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();通过调用.button()元素来使 jQuery Ui Button 可用。

Answer 3

尝试使用：

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