val ()을 사용하여 select의 값을 설정할 때 jquery change 이벤트가 트리거되지 않는 이유는 무엇입니까?

에 change()의해 설정 될 때 이벤트 핸들러 의 로직 이 실행되지 val()않지만 사용자가 마우스로 값을 선택할 때 실행됩니다. 왜 이런거야?

<select id="single">
    <option>Single</option>
    <option>Single2</option>
</select>

<script>
    $(function() {
        $(":input#single").change(function() {
           /* Logic here does not execute when val() is used */
        });
    });

    $("#single").val("Single2");
</script>

때문에 change이벤트는 사용자가 대신 자바 스크립트 코드를 통해 시작 실제 브라우저 이벤트가 필요합니다.

대신이 작업을 수행하십시오.

$("#single").val("Single2").trigger('change');

또는

$("#single").val("Single2").change();

다음과 같이 변경 이벤트를 수동으로 트리거 할 수 있다고 생각합니다 trigger().

$("#single").val("Single2").trigger('change');

왜 자동으로 실행되지 않더라도 모르겠습니다.

val () 다음에이 코드를 추가하면 작동하는 것 같습니다.

$(":input#single").trigger('change');

API에서 읽을 수있는 한. 이벤트는 사용자가 옵션을 클릭 할 때만 발생합니다.

http://api.jquery.com/change/

선택 상자, 확인란 및 라디오 버튼의 경우 사용자가 마우스로 선택하면 이벤트가 즉시 시작되지만 다른 요소 유형의 경우 요소가 포커스를 잃을 때까지 이벤트가 지연됩니다.

사용자 정의 함수를 쉽게 추가하고 값을 변경하면 변경이 트리거되기를 원할 때 언제든지 호출 할 수 있습니다.

$.fn.valAndTrigger = function (element) {
    return $(this).val(element).trigger('change');
}

과

$("#sample").valAndTirgger("NewValue");

또는 val 함수를 재정 의하여 val이 호출 될 때 항상 변경 사항을 호출 할 수 있습니다

(function ($) {
    var originalVal = $.fn.val;
    $.fn.val = function (value) {
        this.trigger("change");
        return originalVal.call(this, value);
    };
})(jQuery);

http://jsfiddle.net/r60bfkub/의 샘플

기본 변경 이벤트와 혼합하고 싶지 않은 경우 사용자 정의 이벤트를 제공 할 수 있습니다

$('input.test').on('value_changed', function(e){
    console.log('value changed to '+$(this).val());
});

값 설정시 이벤트를 트리거하려면 다음을 수행하십시오.

$('input.test').val('I am a new value').trigger('value_changed');

Wordpress와 함께 CMB2를 사용하는 동안 동일한 문제가 발생하여 파일 업로드 메타 박스의 변경 이벤트에 연결하고 싶었습니다.

따라서 변경을 호출하는 코드 (이 경우 CMB2 스크립트)를 수정할 수없는 경우 아래 코드를 사용하십시오. 값이 설정된 후에 트리거가 호출되고, 그렇지 않으면 변경 eventHandler가 작동하지만 값은 설정되는 값이 아닌 이전 값이됩니다.

내가 사용하는 코드는 다음과 같습니다.

(function ($) {
    var originalVal = $.fn.val;
    $.fn.val = function (value) {
        if (arguments.length >= 1) {
            // setter invoked, do processing
            return originalVal.call(this, value).trigger('change');
        }
        //getter invoked do processing
        return originalVal.call(this);
    };
})(jQuery);

$(":input#single").trigger('change');

이것은 내 스크립트에서 효과가있었습니다. 3 개의 콤보가 있고 chainSelect 이벤트와 바인딩합니다 .URL로 3 개의 값을 전달해야하며 기본적으로 모두 드롭 다운을 선택하십시오. 나는 이것을 사용했다

$('#machineMake').val('<?php echo $_GET['headMake']; ?>').trigger('change');

그리고 첫 번째 행사는 효과가있었습니다.

선택 옵션을 양식에 추가하고 변경 이벤트를 트리거하려는 경우 setTimeout이 필요하다는 것을 알았습니다. 그렇지 않으면 jQuery가 새로 추가 된 선택 상자를 선택하지 않습니다.

window.setTimeout(function() { jQuery('.languagedisplay').change();}, 1);