val () không kích hoạt thay đổi () trong jQuery

Tôi đang cố gắng kích hoạt changesự kiện trên hộp văn bản khi tôi thay đổi giá trị của nó bằng một nút, nhưng nó không hoạt động. Kiểm tra fiddle này .

Nếu bạn nhập nội dung nào đó vào hộp văn bản và nhấp vào nơi khác, changesẽ được kích hoạt. Tuy nhiên, nếu bạn nhấp vào nút, giá trị hộp văn bản sẽ thay đổi, nhưng changekhông kích hoạt. Tại sao?

onchange chỉ kích hoạt khi người dùng gõ vào đầu vào và sau đó đầu vào mất tiêu điểm.

Bạn có thể gọi thủ công onchangesự kiện bằng cách sử dụng sau khi đặt giá trị:

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

Ngoài ra, bạn có thể kích hoạt sự kiện bằng cách sử dụng:

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

Từ đề xuất tuyệt vời của redsapes, điều này hoạt động độc đáo:

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

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

Bạn có thể dễ dàng ghi đè valchức năng để kích hoạt thay đổi bằng cách thay thế nó bằng proxy thành valchức năng ban đầu .

chỉ cần thêm mã này vào đâu đó trong tài liệu của bạn (sau khi tải 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);

Một ví dụ làm việc: ở đây

(Lưu ý rằng điều này sẽ luôn kích hoạt changekhi val(new_val)được gọi ngay cả khi giá trị không thực sự thay đổi.)

Nếu bạn muốn kích hoạt thay đổi CHỈ khi giá trị thực sự thay đổi, hãy sử dụng giá trị này:

//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);

Ví dụ trực tiếp cho điều đó: http://jsfiddle.net/5fSmx/1/

Bạn cần xâu chuỗi phương thức như thế này:

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

Không, bạn có thể cần kích hoạt thủ công sau khi đặt giá trị:

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

hoặc là:

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

Có vẻ như các sự kiện không sủi bọt. Thử cái này:

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

Tôi hi vọng cái này giúp được.

Tôi đã thử chỉ là một cái cũ đơn giản $("#mytext").trigger('change')mà không lưu giá trị cũ, và các .changeđám cháy ngay cả khi giá trị không thay đổi. Đó là lý do tại sao tôi đã lưu giá trị trước đó và $("#mytext").trigger('change')chỉ gọi nếu nó thay đổi.

Kể từ feb 2019 .addEventListener()hiện không hoạt động với jQuery.trigger() hoặc .change(), bạn có thể kiểm tra nó bên dưới bằng Chrome hoặc 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">

bạn phải sử dụng .dispatchEvent()thay thế.

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

Từ https://api.jquery.com/change/ :

Sự changekiện được gửi đến một phần tử khi giá trị của nó thay đổi. Sự kiện này được giới hạn cho <input>các yếu tố, <textarea>hộp và <select>các yếu tố. Đố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.

Tôi biết đây là một chủ đề cũ, nhưng đối với những người khác đang tìm kiếm, các giải pháp trên có thể không tốt như sau, thay vì kiểm tra changecác sự kiện, hãy kiểm tra các inputsự kiện.

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