Question

我有一个像这样生成的动态输入字段

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

我有一个按钮，当我点击它时，它会使用

将数据输入到该输入字段

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

好的，如果我点击按钮，它将填写这些值，但console.log（'hi'）没有被解雇。但是，如果我在文本框中输入然后我将焦点留在那里，我可以看到console.log（'hi'）正在解雇。请注意，此处的代码只是一个示例。

我的Jquery版本是3.2.1

Answer 1

您需要在更改change function后立即触发input value，因为只有当用户手动更改值并失去焦点时才会触发change fn。您可以使用.trigger('change')或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>

Answer 2

我认为您在点击的按钮上找到的data-id输入元素的值等于data-id。如果是这样，您可以使用

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

来自previous topic。 onchange仅在用户键入输入时触发，然后输入失去焦点。因此，您需要手动触发事件。

$('.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
});

更改jquery上的动态输入

2 个答案: