JQuery中change事件绑定失效求助：文本框修改后设为禁用/只读

Hey there! Let's break down why your change event isn't working as expected, and get that text field disabled/readonly after modification sorted out.

First, let's clarify how the native change event works for text fields: it only triggers when the field loses focus AND its value has changed. So if you're typing in the field and expecting the alert to pop up immediately, that's why it's not happening—change waits for you to click away or tab out of the field.

If that's not the issue, here are other common fixes based on different scenarios:

1. You want to react to real-time input (not just on focus loss) #

Use the input event instead—it fires every time the field's value changes (typing, pasting, deleting, etc.). This is probably what you need if you want to disable the field right after the user edits it:

$("#submitOrder_cust_id_name").on('input', function () {
    alert("Test");
    // Set the field to disabled or readonly
    $(this).prop('disabled', true);
    // Or use readonly if you want the content to still be selectable:
    // $(this).prop('readonly', true);
});

2. You specifically need the change event to fire (on focus loss) #

If you still want to use change, make sure you're actually triggering the focus loss step. After editing the field, click outside of it or press the Tab key—this should trigger the event. If it still doesn't fire:

• Check if the text field is a native <input> element, or if it's wrapped in a UI component (like jQuery UI, Bootstrap, or a custom framework). Some components override native events, so you might need to use the component's built-in change event instead of the native one.
• Look for other code that might be stopping event propagation—like event.stopPropagation() or return false in another event handler bound to the field.

3. You're modifying the field's value via JavaScript #

If you're updating the text field's value using code (not user input), the native change event won't fire automatically. You need to manually trigger it with trigger('change'):

// Example of setting value and triggering change
$("#submitOrder_cust_id_name").val("Updated value").trigger('change');

Give these fixes a shot—chances are the input event will solve your immediate need to disable the field right after modification.

内容的提问来源于stack exchange，提问作者M. Fahrizal