使用 AJAX 刷新页面时运行 onLoad 脚本答案

【问题标题】：Run onLoad script when page refreshed with AJAX使用 AJAX 刷新页面时运行 onLoad 脚本
【发布时间】：2014-03-12 19:07:47
【问题描述】：

我有一个 jQuery 用于使项目可拖动：

$( ".draggable" ).draggable();});

工作正常here，你可以左右拖动文字

它通过运行脚本来工作，该脚本使用class="draggable" 将一些类名添加到任何跨度，并在页面加载时执行此操作，因此它们看起来像这样：

<span class="draggable ui-draggable" style="position: relative; left: -129.625px; top: -137.625px;">confident</span>

这个问题是按下绿色按钮会用 AJAX 刷新词库，它会调用一个新文件 wordbank.php，每次你按下它都会为你生成一个新的词库。

但正因为如此，一旦您刷新了 AJAX，它就不会再次运行脚本，因此拖动不起作用。

如何让脚本使用 AJAX 重新运行？

【问题讨论】：

我不确定我是否理解您的需求，但您可以附加一个函数，该函数可以在加载完成后再次运行脚本。只需在 ajax 调用中使用回调函数即可。
本文顶部的代码行不会影响其后加载的任何内容。因此，当您使用 AJAX 调用刷新词库时，它不会在其上运行脚本。您能否以正确的答案解释这个答案，好像它是正确的我无法标记它？

标签： javascript php jquery html ajax

【解决方案1】：

通过检查新创建的元素，您可以看到它们缺少 ui-draggable 类。您需要再次调用$( ".draggable" ).draggable(); 来绑定新的/动态元素。

我认为最好的方法是在您的 AJAX 请求的 success 或 complete 回调中，您可以使用此行：

$('.draggable:not(.ui-draggable)').draggable();

绑定任何新的并且还没有 ui-draggable 类的单词。

既然你已经在使用 jquery，你应该利用他们的 ajax 方法：

function refreshWords()
{
     $.ajax({
        url: "wordbank.php",
        success: function(data){
            $("#wordbank").html(data);
            $('.draggable:not(.ui-draggable)').draggable();      
        }
     });
}

【讨论】：

【解决方案2】：

您可以尝试使用：

$('#yourDivId').load("yourPhpUrl.php",function(){
      //the code you want to run after the ajax was completed running   
      $( ".draggable" ).draggable();
});

【讨论】：