Question

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

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

工作正常here，你可以拖动

字样

它的工作原理是运行脚本，将一些类名添加到class="draggable"的任何范围内，并在页面加载时执行此操作，因此它们看起来像这样：

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

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

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

如何让脚本重新运行AJAX？

Answer 1

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

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

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

绑定任何新单词并且DON已经有ui-draggable类。

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

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

Answer 2

您可以尝试使用：

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

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

2 个答案: