jQuery UI-在將來的元素上綁定Selectable

Question

我有一個容器div“ .thumbList”，其中包含作為<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();
    });