動的にロードされたフォームから入力イベントをjQueryマルチファイルにバインドできません。

Question

動的にロードされたフォームからjQueryマルチファイルプラグインを使用してファイルをアップロードしようとすると、

私は、Firefox 9.0.1/Macの

これは私が変更イベントにバインドしようとしている方法です使用しています：私もぼかしを試してみました（とクリックして、[...]）を

$('#newticketform').live('change',function (e){ //newticket form is the form in which my input type=file is contained  
     $('#my_file_element').MultiFile(); //my_file_element is the input type=file element 
}); 

バインディングをフォームまたは入力フィールドにする必要がありますか？私は行動の違いなしに両方を試みました。

.liveの代わりに.onを使用すると、上記の関数はまったくトリガーされません。

フォームを動的コンテンツとして読み込む前にファイルをアップロードできました。フォームをメインページに読み込む際には、何らかの方法でイベントをバインドする必要があります。

これは何が起こるかされています

• 1回目：何も起こらない（しかし、彼は上記の機能がトリガされ、 は、アラートを使用して確認しました）。私。アップロードするファイルのリストにはファイルがありません。
• 2回目：ファイルがリストに追加されます。

ファイルを追加しようとする前にバインドが実現されていないように見えますが、2度目は動作しています。

念のために私は同様にHTMLを含めている：まだ

$("#newticketmenu").live('click',function(event){ 
      $("#adminarea").load("http://" + hostname + "/" + compdir + "/modules/core/newticket/newticket.php", function(){ 
       $('#newticketform').on('change', '#my_file_element', function(){  
        $(this).MultiFile(); 
       }) 
       addNewTicketValidation();           
      }); 
     }); 

、まったく同じ行動：

<form method="post" enctype="multipart/form-data" id="newticketform"> 
     <input type="hidden" value="2000000" name="MAX_FILE_SIZE"> 
     <label for="title">Rubrik</label> <input type="text" name="title" id="title"><br><br> 
       <label for="description">Beskrivning</label> <textarea name="description" id="description" cols="50" rows="15"></textarea><br> 

       <input type="file" maxlength="5" name="file[]" id="my_file_element" class="multi"> 
       <div id="files_list"></div> 
       <input type="submit" value="Upload" name="upload"> 
</form> 

は、以下のジャスパーからのフィードバックの後にこれをテスト。

すべてのJavaScriptファイルは、メインページとともにロードされます。

私は間違っていますか？私のやり方が間違っていますか？

ありがとうございます！

Answer 1

ユーザーがファイル入力と対話する前に、プラグインMultiFileを呼び出す必要があります。 DOMに追加されるとすぐに、要素のMultiFileプラグインを呼び出す必要があります。

は、私はあなたが動的にページにフォームを追加しているかどうかはわかりませんが、ここでそれで刺します：サイドノートで

$.ajax({ 
    url  : '<url>', 
    success : function (serverResponse) { 
     $('#my-form-container').html(serverResponse).find('#my_file_element').MultiFile(); 
    } 
}); 

は、あなたのコードは、のフォームに結合しているようですchangeイベントは、フォーム内の入力要素にバインドされているはずです。後者はjQueryの1.7のよう減価償却されているように、私は.delegate()代わりの.live()を使用

$('#my-form-container').delegate('#my_file_element', 'change',function(){  
    $(this).MultiFile(); 
}); 

注意：あなたはこれを試みることができます。 jQueryを使用している場合1。7+あなたはイベント処理を委任するために同様の方法で.on()を使用することができます：.delegate()と.on()のためのパラメータの順序が異なっていること

$('#my-form-container').on('change', '#my_file_element', function(){  
    $(this).MultiFile(); 
}); 

注意してください。 .on()ため

• ドキュメント：.delegate()ためhttp://api.jquery.com/on
• ドキュメント：http://api.jquery.com/delegateあなたはAJAX要求のために（あなたはあなたの例によるものである）コールバック関数の内部で結合イベントを設定している場合

、イベントデリゲーションを使用する必要はありません。DOMにプラグインを追加した直後に、そのコンポーネントでプラグインを直接実行することができます。

$("#adminarea").load("http://" + hostname + "/" + compdir + "/modules/core/newticket 
       /newticket.php", function(){ 
       $('#my_file_element').MultiFile(); 
       addNewTicketValidation(); 
    });