jQuery .change() event not firing in IE

Question

I've got a dialog that performs a calculation that is dependant on three input fields. When any of them are changed it checks whether they are all filled and if they are it processes and gives its response.

It works absolutely fine in FF, Chrome, Opera etc, but in any version of IE it just stops working. The rest of my jQuery works fine, but I can't work out exactly where the problem is here. I think it might be to do with the .change() event or the multiple event binding but I really don't know.

Here's the offending code:

var loan = $("#ltv-loan-amount");
var mortgage = $("#ltv-mortgage");
var property = $("#ltv-property");

$("#ltv-dialog input").change( function() {
    if(loan.val() && mortgage.val() && property.val())
    {
        var ltv = parseInt( ( ( parseInt(loan.val()) + parseInt(mortgage.val()) ) / parseInt(property.val()) )* 1000 );
        ltv /= 10;
        if(ltv > 0 && ltv < 85)
        {
            $("#ltv-result").html("<span id=\"ltv-form-result\">" + ltv + "%</span></p><p><a id=\"ltv-link\" href=\"#sidebar-head\">Congratulations, your LTV has passed. Please now proceed with your application opposite.</a>");
            $("#amount").val(loan.val());
            $("#mortgage_balance").val(mortgage.val());
            $("#prop_value").val(property.val());
            $("#ltv-link").click(function() {
                $( "#ltv-dialog" ).dialog( "close" );
            });
        }
        else if (ltv > 84)
        {
            $("#ltv-result").html("<span id=\"ltv-form-result\">" + ltv + "%</span></p><p>Unfortunately your LTV is greater than 85%. You may still qualify for a loan if you reduce the loan amount.");
        }
        else
        {
            $("#ltv-result").html("</p><p>Please check your input above as you currently have a negative ltv.");
        }
    }
});

and the HTML in question:

<div id="ltv-dialog" title="Do You Qualify for a Loan?">
    <p>Please enter the fields below and your LTV will be calculated automatically.</p>
    <div id="ltv-form">
        <div class="ltv-row">
            <label for="ltv-loan-amount">Loan Amount:</label>
            <input type="text" name="ltv-loan-amount" id="ltv-loan-amount" class="p000" />
        </div>
        <div class="ltv-row">
            <label for="ltv-mortgage">Mortgage Value:</label>
            <input type="text" name="ltv-mortgage" id="ltv-mortgage" class="p000" />
        </div>
        <div class="ltv-row">
            <label for="ltv-property">Estimated Property Value:</label>
            <input type="text" name="ltv-property" id="ltv-property" class="p000" />
        </div>
    </div>
    <div class="ltv-row">
        <p>Loan to Value % (LTV): <span id="ltv-result"></span></p>
    </div>
</div>

An Update

The change event appears to be firing, but only when the text box changes from a value to null.

I think the following post will help you out: [http://stackoverflow.com/questions/208471/getting-jquery-to-recognise-change-in-ie][1] [1]: http://stackoverflow.com/questions/208471/getting-jquery-to-recognise-change-in-ie — pascalvgemert, Mar 29 '12 at 08:15
Please show the relevant HTML. If you're using radio buttons or checkboxes, then you probably want to listen for `.click()` instead of `.change()`. — jfriend00, Mar 29 '12 at 08:16
Where do you declare the variables `loan`, `mortgage` and `property`? — Guffa, Mar 29 '12 at 08:17
@guffa - the variables are posted just above (have edited to indicate) — unfrev, Mar 29 '12 at 08:19
It is a bug with IE, see this previous thread - http://stackoverflow.com/questions/1637503/jquery-change-event-on-select-not-firing-in-ie — jaz9090, Mar 29 '12 at 08:19
I've tried the code using jsfiddle (in IE9) using dev tools + quirksmode, ie7, ie8 and ie9. It works in all for me. — jgauffin, Mar 29 '12 at 08:44
When I try it, it does work: http://jsfiddle.net/EEe4w/ I see a logical error in the code, though. If the LTV is exactly 85%, you get the message that it's greater than 85%, as you use `< 85` in the code. — Guffa, Mar 29 '12 at 08:54

Richard Parnaby-King · Accepted Answer · 2014-12-11T17:01:28.693

10

As you are targeting text input elements, have you tried using a different event? So instead of change use, for example, keyup? $("#ltv-dialog input").keyup( function() {. This will fire after every keypress.

edited Dec 11 '14 at 17:01

answered Mar 29 '12 at 08:56

Richard Parnaby-King

14,703
11
69
129

This worked perfectly - even improved on what I was trying to acheive. – unfrev Mar 29 '12 at 09:00
This is a workaround but not exactly a solution. Change and Keyup are just different events. – Max Jan 06 '20 at 10:06
@Max The `Change` event waits for you to finish interacting with and leaving the input field, e.g. when you have finished typing and leave the input. `keyup` will trigger every time you press a key on the keyboard, i.e. as you type. – Richard Parnaby-King Jan 06 '20 at 11:49
@Richar I am aware. That's why I don't see a solution in the answer. If the user wanted the event to fire every time a button was pressed the question should be different. Nonetheless your answer seemed to have satisfied the user who asked - so we can all be happy. :) – Max Jan 06 '20 at 12:13

score 4 · Answer 2 · answered Mar 29 '12 at 08:36

4

Using jQuery .on() also might solve your problem. Use it like this :

jQuery("#ltv-dialog").on("change", "input", function(){
     alert("It works !");
     //your javascript/jQuery goes here
   }
);

jsfiddle

answered Mar 29 '12 at 08:36

tusar

3,364
6
37
60

score 1 · Answer 3 · answered Apr 18 '17 at 04:37

1

I had the same issue: Below fix worked for me:

Instead of: $("#ltv-dialog input").change( function() {

I used: $('#ltv-dialog').on('input', function() {

answered Apr 18 '17 at 04:37

Hasmukh Rathod

1,108
1
14
20

score -1 · Answer 4 · edited May 31 '16 at 10:13

-1

Please try with using each instead of change / click , which is working fine even first time in IE as well as other browsers

Not Working a first time

$("#checkboxid").change(function () {

});

Working fine even first time

$("#checkboxid").each(function () {

});

edited May 31 '16 at 10:13

Tunaki

132,869
46
340
423

answered May 31 '16 at 09:44

Dayanand Rupanavar

1
1

score -2 · Answer 5 · answered Mar 29 '12 at 08:41

-2

Use the live function, it usually makes it work ...

$("#YOURTHING").live("change", function(){

// CODE HERE

});

answered Mar 29 '12 at 08:41

Machida

1

1

.live (and .delegate) are deprecated since jQuery 1.7. We should use .bind or .on to attach an event to a selector. .bind will not attach the event to elements that are being appended dynamically to the DOM where .on will attach the events even if the elements are being appended dynamically to the DOM. – Tomer Almog Aug 06 '14 at 16:43
.live doesn't work on IE browsers – Abhishek Oct 19 '21 at 20:47

jQuery .change() event not firing in IE

5 Answers5

Linked