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

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

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

我知道我可以用 jQuery.live() 用于动态添加点击处理程序等，但如何应用jQueryUI button() 给他们？

3725

2018-06-12 14:01

起源

当您通过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的变化。

2018-06-12 14:21

很感谢。所以简短的回答是 - 除非你使用livequery插件，否则你不能。无论如何可能会检查出来，但如果它的工作方式如此，我会对效率提出看法。关于在上下文中调用方法的有用信息 - 我认为我主要关注的是避免在页面中的所有元素上重新运行.button（），这是你回答的。 - Hippyjim

作为这个答案的旁注，我不得不颠倒“刷新”的顺序，它是$（“。button”，数据）.button（），我必须做$（数据，“。按钮”）。按钮（），以防其他人正在尝试而且它无法正常工作。 - MatRichard

当您通过ajax重新加载时，请致电 .button() （或者你正在使用的任何变体）上下文，喜欢这个：

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

这将运行 .button() 在元素上 只在回应中 （不是已经在其他地方的页面/ DOM中的其他人） class="button"。

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

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

2018-06-12 14:21

您可以使用以下命令重新绑定事件处理程序：

$("#mybutton").unbind().click(function(){ ..do..something... });

2018-06-12 14:12

非常感谢 - 但它不只是事件处理程序 - jqueryui为每个按钮添加标记和其他内容。否则我可以使用live for click处理程序。我试图避免在jQuery.load（）之上使用回调JS，如果可能的话。 - Hippyjim

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