เหตุใดเหตุการณ์การเปลี่ยนแปลง jquery จึงไม่ทริกเกอร์เมื่อฉันตั้งค่าตัวเลือกโดยใช้ val ()

ตรรกะใน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>

เพราะchangeเหตุการณ์ต้องการเหตุการณ์เบราว์เซอร์จริงที่เริ่มต้นโดยผู้ใช้แทนผ่านรหัสจาวาสคริปต์

ทำสิ่งนี้แทน:

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

หรือ

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

ฉันเชื่อว่าคุณสามารถเรียกใช้เหตุการณ์การเปลี่ยนแปลงด้วยตนเองtrigger():

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

ฉันพบปัญหาเดียวกันในขณะที่ใช้ CMB2 กับ Wordpress และต้องการเชื่อมโยงกับเหตุการณ์การเปลี่ยนแปลงของไฟล์อัปโหลดไฟล์ metabox

ดังนั้นในกรณีที่คุณไม่สามารถแก้ไขโค้ดที่เรียกใช้การเปลี่ยนแปลง (ในกรณีนี้คือสคริปต์ CMB2) ให้ใช้รหัสด้านล่าง ทริกเกอร์กำลังถูกเรียกใช้หลังจากมีการตั้งค่ามิฉะนั้นเหตุการณ์การเปลี่ยนแปลงของคุณ Handler จะทำงาน แต่ค่าจะเป็นค่าก่อนหน้าไม่ใช่ค่าที่ตั้งไว้

นี่คือรหัสที่ฉันใช้:

(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 รายการ & ผูกกับเหตุการณ์ chainSelect ฉันต้องผ่าน 3 ค่าโดย url & ค่าเริ่มต้นเลือกดร็อปดาวน์ทั้งหมด ฉันใช้สิ่งนี้

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

และเหตุการณ์แรกทำงาน

หากคุณเพิ่งเพิ่มตัวเลือกที่เลือกไปยังแบบฟอร์มและคุณต้องการที่จะทริกเกอร์เหตุการณ์การเปลี่ยนแปลงฉันได้พบว่าจำเป็นต้องมี setTimeout มิฉะนั้น jQuery จะไม่รับกล่องตัวเลือกที่เพิ่มเข้ามาใหม่:

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