jQuery - 让两个函数相互配合答案

【问题标题】：jQuery - getting two functions to work with each otherjQuery - 让两个函数相互配合
【发布时间】：2011-02-04 13:21:38
【问题描述】：

我对 jQuery 不太有信心，但事实证明它对拖动和上传文件等功能很有用。

我尝试结合我发现的一个脚本，该脚本允许我在不刷新页面的情况下上传文件（可行），并且我开发了自己的拖动系统（可行）。

我遇到的问题是，当图像上传时，我无法拖动它 - 但如果图像已经存在，我可以拖动它。基本上 - 我似乎无法让一个人与另一个人交谈。

上传功能开始如下：

$(document).ready(function(){
    ....
    $('#upload_container').html("<img class='drag-image' id='draggable' src='"+response+"'>);
dragme();
    ....
});

我最初确实将$('#upload_container').html 设置为document.getElementByID('upload_container').innerHTML，但我似乎记得这会阻止jQuery 接收dragme(); 声明（尽管似乎仍然不起作用。Firefox 仍然声明dragme()函数尚未定义，即使它存在 - 所以我认为我调用它不正确。

dragme jQuery 启动如下：

$(document).ready(function dragme(){
    ....
    $("#draggable").draggable({
        drag: function(event, ui){ 
            var pos = $(this).offset();
            $("#x").val(pos.left);
            $("#y").val(pos.top);
        }
        ....
    });
    ....
});

如果将两者结合起来会起作用，还是有办法让它们通过正确的调用起作用？

【问题讨论】：

标签： jquery

【解决方案1】：

听起来您希望从“加载”调用加载的图像是可拖动的。

您所拥有的问题是一旦加载原始页面就会触发“Ready”函数，但不会涵盖触发后加载的任何元素。

所以无论你使用什么 LOAD 函数都应该有一个回调。在该回调中，您将需要调用可拖动函数。

所以代码看起来像：

$(document).ready(function(){

    function createDrag(target)
    {
        target.draggable({
            drag: function(event, ui){ 
                var pos = $(this).offset();
                $("#x").val(pos.left);
                $("#y").val(pos.top);
            }
        });
    }

    createDrag($("#draggable"));

    $('#loader').load('url', function(){ createDrag($("#draggable")); });

});

【讨论】：

谢谢 - 这几乎帮助我弄清楚了！ :P

【解决方案2】：

假设在上传文件后执行以下代码，你是doing it wrong（对不起，今天忍不住了）。

$(document).ready() 只能在 DOM 初始化之后调用一次。

$(document).ready(function(){
    ....
    $('#upload_container').html("<img class='drag-image' id='draggable' src='"+response+"'>);
dragme();
    ....
});

此外，您可能不想在 DOM 初始化之后定义函数，而您正在使用 dragme() 函数进行定义。这很可能会导致您在不同浏览器中看到不需要的行为：

Firefox 仍然声明 dragme() 甚至还没有定义函数虽然它在那里 - 所以我相信我叫错了。

上述行为很可能是由此造成的。

由于您是通过上传文件来动态添加文件，因此您可以执行以下操作：

$(file).uploaded(function(result) {
    var img = $('<img src="foo"/>');
    $('#upload_container').append(img).
    $(img).draggable();
});

【讨论】：