javascript - 只读在 jquery 中的变化

Question

I want to fire an on change event for a read-only input in jquery and then append some HTML code below it. So basically, whenever the read-only input changes, HTML code should be appended.

请看下面我的代码。

$(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>