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

val()을 사용하여 선택 값을 설정할 때 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>

왜냐하면.changeevent에는 javascript 코드 대신 사용자가 시작한 실제 브라우저 이벤트가 필요합니다.

대신 이 작업을 수행합니다.

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

또는

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

다음을 사용하여 변경 이벤트를 수동으로 트리거할 수 있습니다.

$("#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").valAndTrigger("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');

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

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

워드프레스로 CMB2를 사용하던 중 같은 문제가 발생하여 파일 업로드 메타박스의 변경 이벤트에 연결하고 싶었습니다.

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

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

(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개의 콤보가 있고 체인으로 바인드를 합니다 이벤트를 선택합니다. URL로 3개의 값을 전달해야 합니다. 기본적으로 모든 드롭다운을 선택합니다.이거 썼어요.

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

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

값을 변경하는 방법

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

또한 변경 이벤트를 트리거합니다.

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

이 논리는 한 페이지에 여러 선택 옵션이 있을 때 유용합니다.
하나의 변경 사항과 다른 선택 옵션은 변경해야 하지만 변경 이벤트를 트리거하지 않습니다.

언급URL : https://stackoverflow.com/questions/4672505/why-does-the-jquery-change-event-not-trigger-when-i-set-the-value-of-a-select-us