将 jQueryui 按钮添加到动态添加的内容

Posted 2023-05-08

【中文标题】将 jQueryui 按钮添加到动态添加的内容

【英文标题】：Adding jQueryui Buttons to dynamically added content

【发布时间】：2011-03-03 00:24:19

【问题描述】：

我有一个项目列表，其中包含一些与之关联的 jQueryUI 按钮。在一个动作（删除一个项目）之后，我想通过 ajax 重新加载列表。

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

我知道我可以使用jQuery.live() 来动态添加点击处理程序等，但是如何将 jQueryUI button() 应用到它们？

【参考方案1】：

当您通过 ajax 重新加载时，在该 context 中调用 .button()（或您正在使用的任何变体），如下所示：

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

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

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

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

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

【讨论】：

非常感谢。所以简短的回答是 - 你不能，除非你使用 livequery 插件。无论如何可能会检查一下，但如果它是这样工作的，我会同意你关于效率的观点。关于在上下文中调用方法的有用信息 - 我认为我主要关心的是避免在页面中的所有元素上重新运行 .button() ，您回答了。

作为这个答案的旁注，我不得不颠倒“刷新”的顺序，它是 $(".button", data).button()，我必须做 $(data , ".button").button()，以防万一其他人尝试但它不起作用。

【参考方案2】：

您可以重新绑定事件处理程序：

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

【讨论】：

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