jQuery .val เปลี่ยนไม่เปลี่ยนค่าอินพุต

ฉันมีอินพุต HTML พร้อมลิงก์ในค่า

<input type = 'text' value = 'http://www.link.com' id = 'link' />

ฉันใช้ jQuery เพื่อเปลี่ยนค่าของเหตุการณ์หนึ่ง ๆ

$('#link').val('new value');

โค้ดด้านบนจะเปลี่ยนค่าของกล่องข้อความ แต่ไม่เปลี่ยนค่าในโค้ด (ค่า = 'http://www.link.com' จะไม่เปลี่ยนแปลง) ฉันต้องการค่า = '' เพื่อเปลี่ยนเช่นกัน

ใช้attrแทน
$('#link').attr('value', 'new value');

การสาธิต

การเปลี่ยนคุณสมบัติค่าไม่ได้เปลี่ยนdefaultValue. ในโค้ด (เรียกด้วย.html()หรือinnerHTML) แอตทริบิวต์ value จะมีคุณสมบัติdefaultValueไม่ใช่ค่า

เพื่อขยายความเกี่ยวกับคำตอบของ Ricardo: https://stackoverflow.com/a/11873775/7672426

http://api.jquery.com/val/#val2

เกี่ยวกับ val ()

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

นี่เป็นเพียงสถานการณ์ที่อาจเกิดขึ้นกับฉัน ถ้ามันช่วยใครบางคนได้ดี: ฉันเขียนแอพที่ซับซ้อนซึ่งอยู่ที่ไหนสักแห่งตามรหัสฉันใช้ฟังก์ชันเพื่อล้างค่ากล่องข้อความทั้งหมดก่อนที่จะแสดง บางครั้งต่อมาฉันพยายามตั้งค่ากล่องข้อความโดยใช้ jquery val ('value') แต่ฉันไม่ได้สังเกตว่าหลังจากนั้นฉันก็เรียกใช้เมธอด ClearAllInputs .. ดังนั้นสิ่งนี้อาจเกิดขึ้นได้

$('#link').prop('value', 'new value');

คำอธิบาย: Attr จะทำงานบน jQuery 1.6 แต่ในขณะที่ jQuery 1.6.1 มีการเปลี่ยนแปลง ในกรณีส่วนใหญ่ prop () ทำสิ่งที่ attr () เคยทำ โดยทั่วไปการแทนที่การโทรไปยัง attr () ด้วย prop () ในโค้ดของคุณจะใช้งานได้ Attr จะให้ค่าขององค์ประกอบตามที่กำหนดไว้ใน html ในการโหลดเพจและ prop จะให้ค่าที่อัปเดตขององค์ประกอบซึ่งแก้ไขผ่าน jQuery

ปัญหาที่คล้ายกันของฉันเกิดจากการมีอักขระพิเศษ (เช่นจุด) ในตัวเลือก

การแก้ไขคือการหลีกเลี่ยงอักขระพิเศษ:

$("#dots\\.er\\.bad").val("mmmk");

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
function changes() {
$('#link').val('new value');
}
</script>
<button onclick="changes()">a</button>
<input type='text' value='http://www.link.com' id='link'>

สำหรับฉันปัญหาคือการเปลี่ยนค่าสำหรับฟิลด์นี้ไม่ได้ผล:

$('#cardNumber').val(maskNumber);

วิธีแก้ปัญหาข้างต้นไม่ได้ผลสำหรับฉันดังนั้นฉันจึงตรวจสอบเพิ่มเติมและพบว่า:

ตามข้อกำหนดเหตุการณ์ DOM ระดับ 2: เหตุการณ์การเปลี่ยนแปลงเกิดขึ้นเมื่อตัวควบคุมสูญเสียโฟกัสอินพุตและค่าของมันได้รับการแก้ไขตั้งแต่ได้รับโฟกัส นั่นหมายความว่าเหตุการณ์การเปลี่ยนแปลงได้รับการออกแบบมาเพื่อเริ่มการเปลี่ยนแปลงโดยการโต้ตอบของผู้ใช้ การเปลี่ยนแปลงแบบเป็นโปรแกรมไม่ทำให้เหตุการณ์นี้เริ่มทำงาน

วิธีแก้ปัญหาคือการเพิ่มฟังก์ชันทริกเกอร์และทำให้เกิดเหตุการณ์การเปลี่ยนแปลงดังนี้:

$('#cardNumber').val(maskNumber).trigger('change');

ตรวจสอบองค์ประกอบมากกว่าหนึ่งรายการด้วยรหัสที่ไม่ซ้ำกัน! นั่นคือสถานการณ์ของฉันกับ foreach loop และการทำซ้ำ id ของฉัน