将 jQueryui 按钮添加到动态添加的内容 [英] Adding jQueryui Buttons to dynamically added content

问题描述

我有一个项目列表，其中有一些 jQueryUI 按钮与之关联.操作(删除项目)后，我想通过 ajax 重新加载列表.

I have a list of items that have some jQueryUI buttons associated with them. After an action (deleting an item) I want to reload the list via ajax.

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

Only problem is when I do so the JQueryUI buttons no longer show, just the standard markup.

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

I know I can use jQuery.live() for dynamically adding click handlers etc, but how do I apply a jQueryUI button() to them?

推荐答案

当你通过 ajax 重新加载时，调用 .button()(或您使用的任何变体)在该 context，像这样:

When you reload via ajax, call .button() (or whatever variant you're using) in that context, like this:

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

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

This will run .button() on elements only in the response (not the others already in the page/DOM elsewhere) with class="button".

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

You can't really use .live() or anything like that here, that relies on event bubbling, not really anything to do with adding/removing elements...when it comes to plugins you need need to execute them again against the new elements you add. Or, the less efficient but more generic approach would be the .livequery() plugin, used like this:

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

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

As I said though, it's not the most efficient thing in the world, since it actually monitors the DOM for changes in various ways.

这篇关于将 jQueryui 按钮添加到动态添加的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！