Содержимое, загруженное с помощью ajax, не запускающее сценарий jQuery

Question

У меня есть следующие перетаскиваемые и выбираемые коды jQuery для перетаскивания/выбора элементов, скрипт работает нормально до тех пор, пока страница не будет изменена, а содержимое внутри <div id="content"></div> будет загружено через ajax, затем перетаскиваемый и по выбору не распознает элементы и не работает вообще.

HTML из <div id="content"></div>, прежде чем Ajax загрузки страницы:

<div id="content"> 
    <div class="files_"> 
    <div class="item_clickable"><span>hello element</span></div> 
    <div class="item_clickable"><span>hello element</span></div> 
    <div class="item_clickable"><span>hello element</span></div> 
    </div> 
</div> 

HTML загружается из Ajax вызова:

<div class="files_"> 
     <div class="item_clickable"><span>hello element</span></div> 
     <div class="item_clickable"><span>hello element</span></div> 
     <div class="item_clickable"><span>hello element</span></div> 
</div> 

Перетаскиваемые наносится на:

.files <div class="files"></div> 

пример кода загрузки страницы:

function (event, url, manual) { 
    if (typeof manual === "undefined") { 
     manual = false; 
    } 
    if (typeof url === "undefined") { 
     link = $(this); 
     if (link.data('no-ajax') === true) 
      return; 
     var href = link.attr("href"), 
      target = (typeof link.data('target') !== "undefined") ? link.data('target') : '#content', 
      append = (typeof link.data('append') !== "undefined") ? link.data('append') : false, 
      changeUrl = (typeof link.data('change-url') === "undefined") ? true : link.data('change-url'), 
      type = (typeof link.data('type') !== "undefined") ? link.data('type') : 'GET'; 
     if (!href || href === "#" || href === "javascript:void(0);" || href === "javascript:void(0)") 
      return; 
     console.log(changeUrl); 
    } else { 
     target = '#content'; 
     type = "GET"; 
     append = false; 
     changeUrl = true; 
     var href = url; 
    } 
    $.ajax({ 
     type: type, 
     url: href, 
     async: true, 
     beforeSend: function() { 
      Buckty.loading('s'); 
     } 
    }).always(function() { 
     Buckty.loading('h'); 
    }).done(function (data) { 
     var content = $(data).filter('#content').html(); 
     var matches = data.match(/<title>(.*?)<\/title>/); 
     if (matches) { 
      var title = matches[1]; 
     } 
     if (title) 
      document.title = title; 
     if (content) { 
      if (append === false) 
       $(target).html(content); 
      else 
       $(target).append(content); 
     } else 
      $(target).html(data); 
     if (changeUrl) { 
      manualStateChange = manual; 
      History.pushState({}, document.title, href); 
     } 
    }); 
    return false; 
} 

перетаскивать и выбор сценария:

if ($(".files_").length) { 

    jQuery(".files_").selectable(); 



    // manually trigger the "select" of clicked elements 
    jQuery(".files_ > div").click(function (e) { 
     if (e.metaKey == false) { 
      // if command key is pressed don't deselect existing elements 
      $(".files_ > div").removeClass("ui-selected"); 
      $(this).addClass('ui-selected') 
     } else { 
      if ($(this).hasClass("ui-selected")) { 
       // remove selected class from element if already selected 
       $(this).removeClass("ui-selected"); 
      } else { 
       // add selecting class if not 
       $(this).addClass("ui-selecting"); 
      } 
     } 

     //$(".files_").data("files_")._mouseStop(null); 
    }); 

    // starting position of the divs 
    jQuery(".folder_container ul li").droppable({ 
     accept: '.files_ .file_item', 
     drop: function (event, ui) { 

      console.log(ui); 
     } 
    }); 
    jQuery(".files_ .file_item").draggable({ 
     helper: drag_me, 
     cancel: '.uploading', 
     cursor: 'move', 
     cursorAt: { 
      left: 0, 
      top: 0 
     } 
    }); 

} 

вызов Ajax работает на каждом клике на любой странице или элемент, но JavaScript для элементов, которые загружаются из Ajax вызова не влияет на события JavaScript.

Если бы речь шла о каком-то маленьком коде, я бы вставил его в функцию успеха, но код большой, есть не только перетаскиваемые и выбираемые, но и многие другие события, вот почему я избегаю вставьте его внутри функции успеха

было бы неплохо иметь хорошее решение, чтобы установить кучу кода, чтобы он работал даже после загрузки страницы ajax.

Answer 1

решаемые оборачивать все другие код внутри функции, как это:

, а затем и называл его в успех функции АЯКС загрузки страницы:

Buckty.load_script();