jQuery에서 val ()이 change ()를 트리거하지 않습니다.

change버튼으로 값을 변경하면 텍스트 상자 에서 이벤트 를 트리거하려고하는데 작동하지 않습니다. 이 바이올린을 확인하십시오 .

텍스트 상자에 무언가를 입력하고 다른 곳을 클릭 change하면 트리거됩니다. 그러나 단추를 클릭하면 텍스트 상자 값이 변경되지만 change트리거되지는 않습니다. 왜?

onchange 사용자가 입력을 입력하면 입력이 포커스를 잃을 때만 발생합니다.

onchange값을 설정 한 후을 사용 하여 이벤트를 수동으로 호출 할 수 있습니다 .

$("#mytext").change(); // someObject.onchange(); in standard JS

또는 다음을 사용하여 이벤트를 트리거 할 수 있습니다 .

$("#mytext").trigger("change");

redsquare의 훌륭한 제안에서 이것은 잘 작동합니다.

$.fn.changeVal = function (v) {
    return this.val(v).trigger("change");
}

$("#my-input").changeVal("Tyrannosaurus Rex");

val원래 val함수 의 프록시로 바꾸어 변경을 트리거 하도록 함수를 매우 쉽게 재정의 할 수 있습니다 .

jQuery를로드 한 후 문서 어딘가에이 코드를 추가하십시오.

(function($){
    var originalVal = $.fn.val;
    $.fn.val = function(){
        var result =originalVal.apply(this,arguments);
        if(arguments.length>0)
            $(this).change(); // OR with custom event $(this).trigger('value-changed');
        return result;
    };
})(jQuery);

실례 : 여기

( 실제로 값이 변경되지 않은 경우에도 호출 change될 때 트리거 됩니다 val(new_val).)

값이 실제로 변경되었을 때만 변경을 트리거하려면 다음 중 하나를 사용하십시오.

//This will trigger "change" event when "val(new_val)" called 
//with value different than the current one
(function($){
    var originalVal = $.fn.val;
    $.fn.val = function(){
        var prev;
        if(arguments.length>0){
            prev = originalVal.apply(this,[]);
        }
        var result =originalVal.apply(this,arguments);
        if(arguments.length>0 && prev!=originalVal.apply(this,[]))
            $(this).change();  // OR with custom event $(this).trigger('value-changed')
        return result;
    };
})(jQuery);

이에 대한 실제 예 : http://jsfiddle.net/5fSmx/1/

다음과 같이 메소드를 연결해야합니다.

$('#input').val('test').change();

값을 설정 한 후 수동으로 트리거해야 할 수도 있습니다.

$('#mytext').change();

또는:

$('#mytext').trigger('change');

이벤트가 버블 링되지 않는 것 같습니다. 이 시도:

$("#mybutton").click(function(){
  var oldval=$("#mytext").val();
  $("#mytext").val('Changed by button');
  var newval=$("#mytext").val();
  if (newval != oldval) {
    $("#mytext").trigger('change');
  }
});

이게 도움이 되길 바란다.

$("#mytext").trigger('change')이전 값을 저장하지 않고 평범한 오래된 것을 시도했지만 .change값이 변경되지 않은 경우에도 화재가 발생합니다. 그렇기 때문에 이전 값을 저장하고 $("#mytext").trigger('change')변경된 경우에만 호출 했습니다.

2019 년 2 월 .addEventListener()현재 jQuery .trigger()또는 .change()에서 작동하지 않으므로 Chrome 또는 Firefox를 사용하여 아래에서 테스트 할 수 있습니다.

txt.addEventListener('input', function() {
  console.log('not called?');
})
$('#txt').val('test').trigger('input');
$('#txt').trigger('input');
$('#txt').change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt">

.dispatchEvent()대신 사용해야 합니다.

txt.addEventListener('input', function() {
  console.log('it works!');
})
$('#txt').val('yes')
txt.dispatchEvent(new Event('input'));

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

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

에서 https://api.jquery.com/change/ :

change그 값이 변경 될 때 이벤트 요소로 전송된다. 이 이벤트는 <input>요소, <textarea>상자 및 <select>요소로 제한됩니다 . 선택 상자, 확인란 및 라디오 버튼의 경우 사용자가 마우스로 선택하면 이벤트가 즉시 시작되지만 다른 요소 유형의 경우 요소가 포커스를 잃을 때까지 이벤트가 지연됩니다.

나는 이것이 오래된 스레드라는 것을 알고 있지만 다른 사람들을 위해 위의 해결책은 change이벤트를 확인하는 대신 다음과 같이 좋지 않을 수도 input있습니다. 이벤트를 확인하십시오 .

$("#myInput").on("input", function() {
    // Print entered value in a div box
    $("#result").text($(this).val());
});