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

Question

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

Nếu bạn nhập nội dung nào đó vào hộp văn bản và nhấp vào một nơi khác, change sẽ đượ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 được thay đổi, nhưng change không kích hoạt. Tại sao?

Answer 1

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

Bạn có thể tự gọi sự kiện onchange sử dụng sau khi cài đặt giá trị:

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

Ngoài ra, bạn có thể trigger sự kiện sử dụng:

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

Answer 2

Không bạn có thể cần phải kích hoạt nó bằng tay sau khi cài đặt giá trị:

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

hoặc:

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

Answer 3

Có vẻ như các sự kiện không phải là bong bóng. Hãy thử điều 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 hy vọng điều này sẽ hữu ích.

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

Answer 4

Từ gợi ý tuyệt vời redsquare, điều này hoạt động độc đáo:

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

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

Answer 5

Bạn có thể dễ dàng ghi đè val chức năng để kích hoạt thay đổi bằng cách thay thế nó bằng một proxy với bản gốc val chức năng.

chỉ cần thêm Mã này ở đâ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: here

(Lưu ý rằng điều này sẽ luôn kích hoạt change khi val(new_val) được gọi ngay cả khi didn giá trị 't 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); 

sống ví dụ cho điều đó: http://jsfiddle.net/5fSmx/1/

Answer 6

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

Sự kiện change được gửi đến một phần tử khi nó thay đổi giá trị.Sự kiện này được giới hạn ở các thành phần <input>, <textarea> và <select> yếu tố. Đối với các hộp chọn, hộp kiểm và nút radio, sự kiện đượ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 yếu tố khác, sự kiện được hoãn lại cho đến khi yếu tố mất tiêu điểm.

Answer 7

Bạn cần phải chuỗi các phương pháp như thế này: [? JQuery textbox.val ('xxxx') không gây ra biến đổi để bắn]

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