只读对 jquery 中的更改

Question

我想为jquery 中on change的read-only输入触发一个事件，然后在它下面附加一些 HTML 代码。所以基本上，每当 read-only输入发生变化时，HTML都应该附加代码。请在下面查看我的代码。$(function(){    $(document).on('click', 'button', function(){      $('#holder').val($('#getter').val());    });    // This part    $('#holder').on('change', function(){      $('.here').append("<p>Inputted</p>");    });});input[readonly=""]{    background: #ccc;  }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><br><br><input type="text" id="holder" readonly=""><input type="text" id="getter"><button>Go</button><br><br><div class="here"></div>

Answer 1

您可以添加.trigger("change")到$('#holder').val($('#getter').val());然后它会起作用；

演示

$(function() {

  $(document).on('click', 'button', function() {

    $('#holder').val($('#getter').val()).trigger("change");

  });

  $('#holder').on('change', function() {

    $('.here').append("<p>Inputted</p>");

  });

});

input[readonly=""] {

  background: #ccc;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<br><br>

<input type="text" id="holder" readonly="">

<input type="text" id="getter">

<button>Go</button>

<br>

<br>

<div class="here"></div>

Answer 2

这应该是你要找的它只能通过一个事件来完成

$(function(){

  $(document).on('click', 'button', function(){

  

  $('#holder').val($('#getter').val());

  

  $('.here').append("<p>Inputted</p>");

  

  });

  

});

input[readonly=""]{

  

  background: #ccc;

  

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<br><br>

<input type="text" id="holder" readonly="">

<input type="text" id="getter">

<button>Go</button>

<br>

<br>

<div class="here"></div>