添加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的按钮（）来呢？

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

推荐答案

当你通过AJAX刷新，调用 。按钮（） （或者你使用的任何变量）在方面，像这样的：

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

这将运行 .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屋！