val () ไม่เรียกการเปลี่ยนแปลง () ใน jQuery

ฉันพยายามที่จะทริกเกอร์changeเหตุการณ์บนกล่องข้อความเมื่อฉันเปลี่ยนค่าด้วยปุ่ม แต่มันไม่ทำงาน ตรวจสอบซอนี้

หากคุณพิมพ์บางอย่างในกล่องข้อความและคลิกที่อื่นchangeจะถูกเรียกใช้ อย่างไรก็ตามหากคุณคลิกปุ่มค่ากล่องข้อความจะเปลี่ยนไป แต่changeจะไม่มีการกระตุ้น ทำไม?

onchange จะยิงก็ต่อเมื่อผู้ใช้พิมพ์ลงในอินพุตจากนั้นอินพุตจะสูญเสียโฟกัส

คุณสามารถเรียกonchangeเหตุการณ์ด้วยตนเองโดยใช้หลังจากตั้งค่า:

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

หรือคุณสามารถทริกเกอร์เหตุการณ์โดยใช้:

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

จากคำแนะนำที่ยอดเยี่ยมของ redsquare สิ่งนี้ได้ผลดี:

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

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

คุณสามารถแทนที่valฟังก์ชั่นเพื่อเรียกการเปลี่ยนแปลงได้อย่างง่ายดายโดยแทนที่ด้วยพร็อกซีไปยังvalฟังก์ชั่นดั้งเดิม

เพียงเพิ่มรหัสนี้ในเอกสารของคุณ (หลังจากโหลด 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);

ตัวอย่างการทำงาน: ที่นี่

(โปรดทราบว่าสิ่งนี้จะทริกเกอร์เสมอchangeเมื่อval(new_val)ถูกเรียกแม้ว่าค่าจะไม่เปลี่ยนแปลงจริง ๆ )

หากคุณต้องการที่จะทริกเกอร์การเปลี่ยนแปลงเฉพาะเมื่อค่าจริงเปลี่ยนให้ใช้สิ่งนี้:

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

ตัวอย่างสดจากที่: http://jsfiddle.net/5fSmx/1/

คุณต้องเชื่อมโยงวิธีดังกล่าว:

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

ไม่คุณอาจต้องทริกเกอร์ด้วยตนเองหลังจากตั้งค่า:

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

หรือ:

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

ดูเหมือนว่าเหตุการณ์จะไม่เดือดปุด ๆ ลองสิ่งนี้:

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

ฉันหวังว่านี่จะช่วยได้.

ฉันลองแค่เก่าธรรมดา$("#mytext").trigger('change')โดยไม่ต้องบันทึกค่าเก่าและ.changeไฟแม้ว่าค่าจะไม่เปลี่ยนแปลง นั่นคือเหตุผลที่ฉันบันทึกค่าก่อนหน้าและเรียก$("#mytext").trigger('change')ใช้เมื่อมีการเปลี่ยนแปลงเท่านั้น

ตั้งแต่ feb 2019 .addEventListener()ปัจจุบันยังไม่สามารถใช้งานกับ jQuery .trigger()หรือ.change()คุณสามารถทดสอบด้านล่างโดยใช้ Chrome หรือ 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">

คุณต้องใช้.dispatchEvent()แทน

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

จากhttps://api.jquery.com/change/ :

changeเหตุการณ์ถูกส่งไปยังองค์ประกอบด้านความคุ้มค่าเมื่อมีการเปลี่ยนแปลง เหตุการณ์นี้ถูก จำกัด ไว้ที่<input>องค์ประกอบ<textarea>กล่องและ<select>องค์ประกอบ สำหรับกล่องที่เลือกช่องทำเครื่องหมายและปุ่มตัวเลือกเหตุการณ์จะถูกยิงทันทีเมื่อผู้ใช้ทำการเลือกด้วยเมาส์ แต่สำหรับองค์ประกอบอื่น ๆ ประเภทเหตุการณ์จะถูกเลื่อนออกไปจนกว่าองค์ประกอบจะหมดโฟกัส

ฉันรู้ว่านี่เป็นเธรดเก่า แต่สำหรับคนอื่น ๆ ที่กำลังมองหาโซลูชันข้างต้นอาจไม่ดีเท่าดังต่อไปนี้แทนที่จะตรวจสอบchangeเหตุการณ์ให้ตรวจสอบinputกิจกรรม

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