上變化不起作用

Question

我有陣列的輸入類型文件，用戶可以點擊添加more.In我的代碼部分的JavaScript我有變化方法

jQuery('.focus_image').on('change', function() { 
      alert("hello"); 

上面的代碼我測試輸入類型的文件時用戶點擊添加新的輸入類型文件，並瀏覽目錄中的文件，但我測試已經輸入的類型文件名橙工作完美，但名稱香蕉不顯示你好什麼代碼是錯誤的？幫我解決這個problem.Below是我的全部代碼

<table> 
    <tr> 
     <th> 
      <label for="test">test</label> 
     </th> 
     <td> 
      <div id="popup1"> 
       <div id="image-zone" style="width:200px;float:left;text-align:center"> 
        <input type='button' class='button-primary' value='Add' id='add_focus'> 
        <input type="file" class="focus_image" name="orange"> 
       </div> 
      </div> 
      <script type="text/javascript"> 
       var count_focus = 0; 
       var num_focus = count_focus; 
       var temp_focus = count_focus + 1; 
       var name_focus = 'Focus_DIV' + temp_focus; 

       jQuery(document).ready(function($) { 

        $("#add_focus").click(function() { 
         if (num_focus == 10) { 
          alert("Only 10 textboxes allow"); 
          return false; 
         } 
         id_div = 'Focus_DIV' + temp_focus; 
         file_id_name = "file_Focus_DIV" + temp_focus; 
         var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Focus_DIV' + temp_focus); 
         newTextBoxDiv.html('<input type="file" id="' + file_id_name + '" name="banana" class="focus_image">'); 
         newTextBoxDiv.appendTo("#image-zone"); 
         temp_focus++; 

         name_focus = 'Focus_DIV' + temp_focus; 
         num_focus++; 

        }); 

       }); 
       //Below code is doesn't work when add new input type file 
       jQuery('.focus_image').on('change', function() { 
        alert("hello"); 
        //     
       }); 
      </script> 
     </td> 
    </tr> 
</table> 

問題可以解決 這個問題可以通過在HTML代碼中添加解決新元素動態必須重新

Answer 1

看看下面的jsfiddle爲您的代碼

http://jsfiddle.net/guNvz/

其實問題很少安排。如果您在HTML中動態添加新元素，則需要重新註冊該事件。

嘗試用下面的腳本：

<script type="text/javascript"> 

     var count_focus = 0; 
      var num_focus = count_focus; 
      var temp_focus = count_focus + 1; 
      var name_focus = 'Focus_DIV' + temp_focus; 

      jQuery(document).ready(function($) { 

       jQuery("#add_focus").click(function() { 
        if (num_focus == 10) { 
         alert("Only 10 textboxes allow"); 
         return false; 
        } 
        id_div = 'Focus_DIV' + temp_focus; 
        file_id_name = "file_Focus_DIV" + temp_focus; 
        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Focus_DIV' + temp_focus); 
        newTextBoxDiv.html('<input type="file" id="' + file_id_name + '" name="banana" class="focus_image">'); 
        newTextBoxDiv.appendTo("#image-zone"); 
        temp_focus++; 

        name_focus = 'Focus_DIV' + temp_focus; 
        num_focus++; 
      jQuery('.focus_image').unbind('change').change(function() { 
       alert("hello"); 
       //     
      }); 
       }); 

      }); 
      //Below code is doesn't work when add new input type file 


    </script> 

讓我知道你有查詢。

謝謝.. !!

Answer 2

不要使用on註冊事件像這樣使用它，在#image-zone上使用它會將這個事件附加到任何現在有的focus_image現在以及它們是否動態添加的事件。

jQuery(document).ready(function($) { 
$('#image-zone').on('change', '.focus_image', function() { 
    // Your code 
}); 
// Your other code like the click event 
}); 

測試這個fiddle這表明你應該怎麼做呢

Answer 3

利用這一點，以排除這是一個CSS問題

$('#banana').focus(function() { 
     alert('Handler for .focus() called.'); 
    }); 

Answer 4

記住，準備函數內部on事件函數

這是修改後的代碼：

<table> 
    <tr> 
     <th> 
      <label for="test">test</label> 
     </th> 
     <td> 
      <div id="popup1"> 
       <div id="image-zone" style="width:200px;float:left;text-align:center"> 
        <input type='button' class='button-primary' value='Add' id='add_focus'> 
        <input type="file" class="focus_image" name="orange"> 
       </div> 
      </div> 
      <script type="text/javascript"> 
       var count_focus = 0; 
       var num_focus = count_focus; 
       var temp_focus = count_focus + 1; 
       var name_focus = 'Focus_DIV' + temp_focus; 

       jQuery(document).ready(function($) { 

        $("#add_focus").click(function() { 
         if (num_focus == 10) { 
          alert("Only 10 textboxes allow"); 
          return false; 
         } 
         id_div = 'Focus_DIV' + temp_focus; 
         file_id_name = "file_Focus_DIV" + temp_focus; 
         var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Focus_DIV' + temp_focus); 
         newTextBoxDiv.html('<input type="file" id="' + file_id_name + '" name="banana" class="focus_image">'); 
         newTextBoxDiv.appendTo("#image-zone"); 
         temp_focus++; 

         name_focus = 'Focus_DIV' + temp_focus; 
         num_focus++; 

        }); 
        //keep the code here 
        jQuery('.focus_image').on('change', function() { 
         alert("hello"); 
         //     
        }); 
       }); 
       //Below code is doesn't work when add new input type file 
       //Removed the code from here 
      </script> 
     </td> 
    </tr> 
</table> 

JSFiddle