только чтение об изменениях в jquery

Question

Я хочу запустить событие on change для ввода read-only в jquery, а затем добавить 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

это должно быть то, что вы ищете, это может быть сделано только с одним событием

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

Answer 2

Вы можете добавить .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>