添加jQueryui按钮以动态添加内容

Question

我有一个项目列表,其中包含一些jQueryUI按钮.在执行操作(删除项目)后,我想通过ajax重新加载列表.

唯一的问题是,当我这样做时,JQueryUI按钮不再显示,只是标准标记.

我知道我可以jQuery.live()用来动态添加点击处理程序等,但我如何应用jQueryUI button()呢？

Answer 1

当您通过ajax重新加载时,.button()在该上下文中调用(或您正在使用的任何变体),如下所示:

$.ajax({
  //other options..
  success: function(data) {
    //insert elements
    $(".button", data).button();
  }
});

这将仅在响应中运行.button()元素(而不是其他位置已在页面/ DOM中的其他元素). class="button"

你不能.live()在这里真正使用或类似的东西,它依赖于事件冒泡,而不是与添加/删除元素有关......当涉及到插件时,你需要再次针对你添加的新元素执行它们.或者,效率较低但更通用的方法是.livequery()插件,使用如下:

$(".button").livequery(function() {
  $(this).button();
});

正如我所说,它不是世界上最有效的东西,因为它实际上以各种方式监视DOM的变化.