內容加載Ajax不觸發jQuery腳本

Question

我有以下可拖動和可選的jQuery代碼項目拖/選擇他們所有，腳本工作正常，直到頁面被更改，並通過ajax加載<div id="content"></div>內的內容，然後可拖動並且可選擇不識別這些元素並且根本不起作用。

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調用加載：的頁面加載代碼

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

例如：

<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> 

可拖動被施加：

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

通過包裝一個像這樣的函數內的所有其它代碼解決：

，然後做叫它AJAX頁面加載成功函數內部：

Buckty.load_script();