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

【问题标题】：Jquery UI - Bind the Selectable on future elementsJquery UI - 在未来元素上绑定 Selectable
【发布时间】：2014-02-05 07:55:10
【问题描述】：

我有一个容器 div“.thumbList”，其中包含

的缩略图。我已经像这样绑定可选择的 jquery UI：

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

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

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

【问题讨论】：

在主页上保留可选择的代码。完成 ajax 请求并将其推送到页面后，代码为 $(".thumbList").selectable();
正如我所提到的，代码不仅仅是$("thumbList").selectable(); 它：$(".thumbList").selectable({ filter:"li", autoRefresh: true, stop: function(){ selectedItemArr = []; selectedItemIdArr = []; $( ".ui-selected", this ).each(function(){ selectedItemArr.push($(this).attr("id")); selectedItemIdArr.push($(this).data("id")); }); $("#selectedCount").text("[ " + selectedItemArr.length + " ]"); updateSelectedList($(".thumbList").data("type")); } }); 我必须复制所有这些行吗？
Gaurav，我刚刚发布了一个答案。

【解决方案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();
    });

【讨论】：