jQuery - お互いに機能する2つの関数を取得する

Question

私はjQueryには自信がありませんが、ファイルのドラッグやアップロードなどの機能には便利です。

ページリフレッシュなしでファイルをアップロードできるようにしたスクリプトを試してみました（動作しています）。独自のドラッグシステムを開発しました。

私の問題は、画像をアップロードするとドラッグできないことです。画像がすでに存在する場合はドラッグできます。基本的に - 私は相手に話すことができないようです。次のように

アップロード機能が開始：

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

私はもともとdocument.getElementByID('upload_container').innerHTMLとして$('#upload_container').htmlを持っていなかったが、私はそれはまだ動作するようには思えませんが（dragme();宣言を拾ってからのjQueryを停止すると覚えているようです。。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); 
     } 
     .... 
    }); 
    .... 
}); 

2つが組み合わされている場合、または正しい呼び出しで作業する方法がある場合は動作しますか？

Answer 1

を、あなたの「ロード」からロードされた画像はドラッグ可能であることを呼び出したいと思っているようですね。

「レディ」機能は、元のページが読み込まれると起動しますが、起動後に読み込まれる要素はすべてカバーしません。

したがって、使用しているどの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")); }); 

}); 

Answer 2

ファイルがアップロードされた後に次のコードを実行すると仮定すると、doing it wrong（今日は申し訳ありませんでした）です。

$(document).ready()は、DOM initの後に1回だけ呼び出す必要があります。

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

また、あなたはおそらく、あなたがdragme()機能で行っているDOMの初期化、後に関数を定義する必要はありません。あなたが異なるブラウザ間で見ている不要なこの動作のでしょう最も可能性の高い結果：

Firefoxはまだそれがあっても かかわらdragme（） 関数が定義されていないと述べている - ので、私は ことを私信じています間違って呼び出しています。

上記の現象は、おそらくこの結果です。

あなたが動的にそれらをアップロードすることで、ファイルを追加しているので、あなたがこのような何か行うことができます：

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