CODEWITHSUNDEEP
javascriptjquery
Monogot
Monogot

Reputation: 191

on change doesn't work

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

Upvotes: 3

Views: 544

Answers (4)

sergioadh
sergioadh

Reputation: 1471

Don't use on like that, use it like this, using it on #image-zone will attach this event to anything that has css class focus_image on #image-zone now and if they are added dynamically.

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

Test out this fiddle which shows how you should do it

Upvotes: 0

Kishan Patel
Kishan Patel

Reputation: 1408

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

Upvotes: 1

Clinton Ward
Clinton Ward

Reputation: 2511

use this, to rule out that it's a css problem 

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

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41832

Keep that on event function inside the ready function

Here is the modified 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++;

                    });
                    //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

Upvotes: 0

Related Questions