Jquery UI - 将Selectable绑定在未来元素上

Question

我有一个容器div“.thumbList”，其中包含缩略图＆lt; li>。我已经将jquery UI与它绑定，如下所示：

$(".thumbList").selectable();

现在，当我点击其他选项卡时，容器div使用Ajax更改了一个新的容器div（同一个类.thumbList）。

我也必须在新容器上应用selectable。现在我正在做的是重新分配元素上的绑定。但是我在可选代码中使用了很多代码，并且通过在ajax响应上再次使用它，我再次复制了此页面中的代码。这对代码的可维护性不利。我认为这可以通过“.on”解决，但不确定将为页面加载绑定它的事件和ajax加载完成两者。

Answer 1

将$(".thumbList").selectable();保留在主页的单独功能中。

function iniThumbList(){
    $(".thumbList").selectable( /* wt ever the your remaining code */);
}

文档初始化后调用iniThumbList（）;这是代码的初始行为。 现在在ajax完成之后，当你在DOM内部有新内容时调用iniThumbList（）; 这样您就不必重复编码，即使以后也很容易阅读。

$.ajax({
    url: "test.html"
    })
    .done(function( html ) {
          $( "#results" ).append( html );
          iniThumbList();
    });