JQuery.change () event not firing in IE

Question

I have a dialog that performs a calculation, which depends on three input fields. When any of them is changed, it checks to see if they are all filled out, and if they are processed and give an answer.

It works 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 pinpoint where the problem is. I think this may be due to the .change () event or to the binding of several events, but I really don't know.

Here's the abusive 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> 

Update

The change event seems to fire, but only when the text field changes from a value to zero.

Answer 1

How do you focus on text input elements, have you tried to use another event? So, instead of change use, for example, keyup ? $("#ltv-dialog input").keyup( function() { . This will fire after every keystroke.

Answer 2

Using jQuery .on() may also 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

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

 $("#YOURTHING").live("change", function(){ // CODE HERE }); 

Answer 4

Try using each instead of change / click , which works great even the first time in IE, as well as in other browsers

Not working for the first time

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

It works fine even the first time

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

Answer 5

I had the same problem: everything fixed below:

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

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