dynamic input on change jquery

Question

I have a dynamic input field which is being generated like this

var field = '<tr><td><input type="text" name="program_id" data-id="'+val['program_id']+'" value="'+val['program_id']+'">'+programBtn+'</td></tr>';
$('#transaction').append(field);
$('#transaction').on('change', 'input',function() {
    console.log('hi');
});

And i have a button that when i click, it will input data into that input field using

$('.button').on('click', function() {
    var text = $(this).data('text');
    var id = $(this).data('id');
    $('#transaction').find('input:'+id).val(text);
});

Ok if i click the button it will fill in those values but console.log('hi') isnt firing. But if i type in the text box and then i leave focus it, i can see console.log('hi') is firing. Note that code here is just an example.

My Jquery version is 3.2.1

Is #transaction also a table? Since tr can only go in a table or tbody. — gurvinder372
– gurvinder372, Commented Dec 13, 2017 at 5:50
#transaction- is it table id or tbody id? because $('#table') you have mentioned in click event handler. — Subhabrata Mondal
– Subhabrata Mondal, Commented Dec 13, 2017 at 5:56

Saravanan I · Accepted Answer · 2017-12-13 06:32:04Z

You need to trigger change function as soon as you change the input value since change fn will be triggered only when the user changes the value manually and losses the focus. you can trigger that using .trigger('change') or change()

var field = '<tr><td><input type="text" name="program_id" data-id="11" value="test"></td></tr>';
$('#transaction').append(field);
$('#transaction').on('change','input',function() {
    console.log('hi');
});
$('button').on('click', function() {
    var text = $(this).data('text');
    var id = $(this).data('id');
    $('#transaction').find('input[data-id="'+ id +'"]').val(text).change();
    //$('#transaction').find('input[data-id="'+ id +'"]').val(text).trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="transaction">Transaction: </div>
<button data-text="Some Text" data-id="11">Click</button>

Chay22 · Accepted Answer · 2017-12-13 06:00:13Z

0

I think you're finding input element that has data-id with value equal to data-id on the clicked button. If that so, you might use

$('#transaction').find('input[data-id="+ id +"]')

And from previous topic. onchange only fires when the user types into the input and then the input loses focus. So, you need to trigger the event manually.

$('.button').on('click', function() {
    var text = $(this).data('text');
    var id = $(this).data('id');
    $('#transaction').find('input[data-id="+ id +"]').val(text).change(); // trigger change event
});

answered Dec 13, 2017 at 6:00

Chay22

2,9042 gold badges19 silver badges25 bronze badges

Collectives™ on Stack Overflow

dynamic input on change jquery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related