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();

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

3 个答案: