Question

我有以下可拖动和可选择的jQuery代码用于项目拖动/全部选择，脚本工作正常，直到页面更改并且<div id="content"></div>内的内容通过ajax加载，然后draggable和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>

Draggable适用于：

.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();

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

1 个答案: