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.

Answer 1

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.

Answer 2

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

Answer 3

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

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

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

Answer 4

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 () {

});

Answer 5

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

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

// CODE HERE

});