無法將輸入事件從動態加載的表單綁定到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
});

綁定應該是表單還是輸入字段？ 我確實嘗試了兩者，但沒有任何差異。

當使用.on而不是.live時，上述功能根本不會觸發。

在將表單作為動態內容加載之前，我設法上傳了文件。 當將表單加載到我的主頁時，我當然必須以某種方式綁定事件。

這是發生了什么：

• 第一次：什么也沒有發生（但上面的功能已觸發，已通過警報確認）。 即沒有文件附加到要上傳的文件列表中。
• 第二次：將文件添加到列表中。

似乎在我第一次嘗試添加文件之前和第二次工作之前都未實現綁定。

以防萬一我也包括html：

<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>

在下面的Jasper反饋之后進行了測試：

$("#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();                                          
          });
      });

仍然，行為完全相同。

所有JavaScript文件都與主頁一起加載。

我究竟做錯了什么？ 我的綁定方式不正確嗎？

謝謝！

Answer 1

那么，在用戶與文件輸入進行交互之前，需要調用插件MultiFile 。 您應該在元素上將MultiFile插件添加到DOM后立即對其進行調用。

我不確定您是如何將表單動態添加到頁面中的，但是這里有一個刺痕：

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

附帶說明一下，您的代碼似乎綁定到了change事件的表單，該事件應該綁定到表單中的輸入元素。 您可以嘗試以下方法：

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

注意，我使用.delegate()代替.live()因為后者已從jQuery 1.7開始貶值。 如果您使用的是jQuery 1.7+，則可以類似的方式使用.on()來委托事件處理：

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

請注意， .delegate()和.on()的參數順序不同。

• .on()文檔： http : .on()
• .delegate()文檔： http : .delegate()

如果要為AJAX請求設置回調函數（根據示例）中的事件綁定，則不需要使用事件委托，只需在添加元素后直接在元素上運行插件到DOM：

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