用ajax加载的内容不会触发jQuery脚本

Question

我具有以下可拖动和可选择的jQuery代码，用于项目拖动/全部选中，脚本运行良好，直到页面被更改并且<div id="content"></div>内容通过Ajax加载，然后可拖动并且selectable无法识别这些元素，并且根本不起作用。

Ajax页面加载之前的<div id="content"></div> HTML：

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

从ajax调用加载的HTML：

<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调用可在任何页面或元素上的每次单击上使用，但从ajax调用加载的元素的JavaScript不会影响JavaScript事件。

如果是关于某种小代码的话，我会在成功函数中插入它，但是代码很大，不仅有可拖动和选择的东西，而且还有许多其他事件，这就是为什么我避免将它插入成功的原因。功能

最好有一个好的解决方案来设置一堆代码以使其即使在加载ajax页面后也能正常工作。

Answer 1

通过将所有其他代码包装在这样的函数中来解决：

Buckty.load_script = function(){

 // whole code here 
}

然后在ajax页面加载的成功函数中调用它：

Buckty.load_script();