Question

基本上我设置了一个带有一些可拖动元素的页面，它工作正常。

我刚刚添加了ajax内容刷新，刷新div，元素在内部，每10秒。

执行此操作后，可拖动功能不再有效。

我相信这是因为要刷新的元素位于单独的页面上，然后使用ajax加载到索引中。

如何解决此问题？

谢谢

基本HTML（这里没什么特别的）

<div id="notes">
    <!--Notes Load Here-->
</div>
<div id="loading">
    Loading..
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/scripts.js"></script>

Scripts.js（包括文档准备）

/* Draggable functionaility */

var a = 3;

$('.postit').draggable(
{
    start: function(){
        $(this).css("z-index", a++);
    },
    stop: function(){
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
    var pid = $(this).attr('id');
    var datastring = 'xpos=' + xPos + ' ypos=' + yPos + ' id=' + pid;

    $.ajax({
        type: "POST",
        url: "savepositions.php",
        datatype: "text",
            data: {positions: datastring}
    });
    }
});

$('.postit').click(function(){
    $(this).addClass('top').removeClass('bottom');
    $(this).siblings().removeClass('top').addClass('bottom');
    $(this).css("z-index", a++);
});



/* Auto Refresh */
$.ajaxSetup(
{
    cache: false,
    beforeSend: function() {
        $('#notes').hide();
        $('#loading').show();
    },
    complete: function() {
        $('#loading').hide();
        $('#notes').show();
    },
    success: function() {
        $('#loading').hide();
        $('#notes').show();
    }
});
var $container = $("#notes");
$container.load("notes.php");
var refreshId = setInterval(function()
{
    $container.load('notes.php');
}, 10000);

Notes.php 对于所有意图和目的，这只包含一个div = class =“postbit”

Answer 1

希望这有帮助，

将所有事件绑定器放在一个函数中，然后调用该函数：

function wrapper(){
 $('.postit').draggable(
 {
 start: function(){
    $(this).css("z-index", a++);
 },
 stop: function(){
    var offset = $(this).offset();
    var xPos = offset.left;
    var yPos = offset.top;
 var pid = $(this).attr('id');
 var datastring = 'xpos=' + xPos + ' ypos=' + yPos + ' id=' + pid;

 $.ajax({
    type: "POST",
    url: "savepositions.php",
    datatype: "text",
        data: {positions: datastring}
 });
 }
});

$('.postit').click(function(){
 $(this).addClass('top').removeClass('bottom');
 $(this).siblings().removeClass('top').addClass('bottom');
 $(this).css("z-index", a++);
});
}

然后：

$(function(){
   wrapper(); // This does the binding on page load
});

然后在你的ajax成功函数调用中：

complete: function() {
    wrapper();
    $('#loading').hide();
    $('#notes').show();
},

使用ajax内容刷新时，jQuery UI draggable不会注入

1 个答案: