Tại sao sự kiện thay đổi jquery không kích hoạt khi tôi đặt giá trị của lựa chọn bằng val ()?

Logic trong change()trình xử lý sự kiện không được chạy khi giá trị được đặt theo val(), nhưng nó chạy khi người dùng chọn một giá trị bằng chuột. Tại sao lại thế này?

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

Bởi vì changesự kiện này yêu cầu một sự kiện trình duyệt thực tế do người dùng khởi xướng thay vì thông qua mã javascript.

Thay vào đó, hãy làm điều này:

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

hoặc là

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

Tôi tin rằng bạn có thể tự kích hoạt sự kiện thay đổi bằng trigger():

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

Mặc dù tại sao nó không tự động bắn, tôi không biết.

Thêm đoạn mã này sau khi val () dường như hoạt động:

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

Theo như tôi có thể đọc trong API. Sự kiện chỉ được kích hoạt khi người dùng nhấp vào một tùy chọn.

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

Đối với các hộp chọn, hộp kiểm và nút radio, sự kiện sẽ được kích hoạt ngay lập tức khi người dùng thực hiện lựa chọn bằng chuột, nhưng đối với các loại phần tử khác, sự kiện được hoãn lại cho đến khi phần tử mất tiêu điểm.

Để dễ dàng hơn, hãy thêm chức năng tùy chỉnh và gọi nó khi bạn muốn thay đổi giá trị cũng kích hoạt thay đổi

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

và

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

Hoặc bạn có thể ghi đè hàm val để luôn gọi thay đổi khi val được gọi

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

Mẫu tại http://jsfiddle.net/r60bfkub/

Trong trường hợp bạn không muốn kết hợp với sự kiện thay đổi mặc định, bạn có thể cung cấp sự kiện tùy chỉnh của mình

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

để kích hoạt sự kiện trên tập giá trị, bạn có thể làm

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

Tôi gặp vấn đề tương tự khi sử dụng CMB2 với Wordpress và muốn tham gia vào sự kiện thay đổi của metabox tải lên tệp.

Vì vậy, trong trường hợp bạn không thể sửa đổi mã gọi thay đổi (trong trường hợp này là tập lệnh CMB2), hãy sử dụng mã bên dưới. Trình kích hoạt đang được gọi SAU giá trị được đặt, nếu không, sự kiện thay đổi của bạn sẽ hoạt động, nhưng giá trị sẽ là giá trị trước đó, không phải giá trị được đặt.

Đây là mã tôi sử dụng:

(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');

Điều này làm việc cho kịch bản của tôi. Tôi có 3 combo và liên kết với sự kiện chainSelect, tôi cần chuyển 3 giá trị theo url & mặc định chọn tất cả thả xuống. Tôi đã sử dụng cái này

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

Và sự kiện đầu tiên đã làm việc.

Nếu bạn vừa thêm tùy chọn chọn vào một biểu mẫu và bạn muốn kích hoạt sự kiện thay đổi, tôi đã tìm thấy một setTimeout là bắt buộc nếu không jQuery không chọn hộp chọn mới được thêm vào:

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