jQuery on change is not working if choose same file on another row data on loop

Question

My jQuery on change is not working if I choose same file on another row data on loop.

for($i=$Page_Start;$i<$Page_End;$i++)
{
?>
    <tr class="trClick" id="<?php echo $dData['DESCRIPTIONID'][$i]; ?>" data-toggle="modal">
        <td>Data</td>
    </tr>
<?php
}

Modal

<div id="modalBellDescriptionLoad" class="modal fade">
    <div class="modal-dialog">
        <form id="updateDescription" action="" method="post" autocomplete="off">
            <div class="modal-content">
                <input type="file" name="bellToneFileInput" class="bellToneFileInput" id="bellToneFileInput"/>
            </div>
        </form>
    </div>
</div>

jQuery

$(".bellToneFileInput").change(function()
{
    alert("Test");
});

alert will appear if I choose different file to another row data loop. If same file choose, alert not appear.

Is there something wrong I do on my code?

Take a look at this: https://stackoverflow.com/questions/4109276/how-to-detect-input-type-file-change-for-the-same-file — Vincent1989, Oct 16 '17 at 02:09
It might be because the value is not actually changing have you tried calling `$(".bellToneFileInput").val(null);` in your .change() function? — Hayden Passmore, Oct 16 '17 at 02:09

Daerik · Accepted Answer · 2017-10-16T02:17:57.963

If you re-select the same file, the value of the input does not change. Although, the event is triggered in Firefox 57 and is not triggered in Chrome 61. I would suggest emptying the value on click.

Update: The event is triggered without emptying the value is Firefox 56 as well, however you must empty the value in Edge 40 and IE 11.

/* Without Clearing Value */
$('#non-empty-upload').change(function() {
  alert(this.files[0].name);
});

/* With Clearing Value */
$('#empty-upload').on('click', function() {
  $(this).val('');
}).on('change', function() {
  alert(this.files[0].name);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Without Emptying Value</h2>
<input id="non-empty-upload" type="file">
<hr>
<h2>Emptying Value</h2>
<input id="empty-upload" type="file">

jQuery on change is not working if choose same file on another row data on loop

1 Answers1