on change doesn't work

Question

i have input type file of array that user can click add more.In my code part javascript i have method on change

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

above code i test input type file when user click add new input type file and browse file in directory but i test already input type file name orange work perfectly but name banana doesn't show hello What code is wrong? Help me to solve this problem.Below is my full code

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

Problem can solve This problem can solve by in code html add new element dynamically must re register event

Answer 1

Look on Below jsfiddle for your code

http://jsfiddle.net/guNvz/

Actually Problem with little arrangement. If you add new element in HTML by dynamically than on that element you need to re register that event.

Try with below script :

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

Let me know you have query.

Thanks..!!