2012-03-29 13 views
6

Tengo un cuadro de diálogo que realiza un cálculo que depende de tres campos de entrada. Cuando se modifica cualquiera de ellos, verifica si están completos y si están procesando y dando su respuesta.jQuery .change() evento no se activa en IE

Funciona absolutamente bien en FF, Chrome, Opera, etc., pero en cualquier versión de IE simplemente deja de funcionar. El resto de mi jQuery funciona bien, pero no puedo averiguar exactamente dónde está el problema aquí. Creo que podría ser con el evento .change() o el enlace múltiple de eventos, pero realmente no lo sé.

Aquí está el código erróneo:

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."); 
     } 
    } 
}); 

y el código HTML en cuestión:

<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> 

Una actualización caso

El cambio parece estar disparando, pero sólo cuando el texto la caja cambia de un valor a nulo.

+0

¿Ha comprobado la consola de errores? –

+1

Creo que el siguiente post te ayudaré a cabo: [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

+2

Muestra el HTML correspondiente.Si está utilizando botones de opción o casillas de verificación, es probable que desee escuchar '.click()' en lugar de '.change()'. – jfriend00

Respuesta

8

A medida que se dirigen a los elementos de entrada de texto, ¿Ha intentado utilizar una evento diferente? Entonces, en lugar de change use, por ejemplo, keyup? $("#ltv-dialog input").keyup(function() {. Esto disparará después de cada pulsación de tecla.

+0

Esto funcionó perfectamente, incluso mejoró en lo que intentaba lograr. – unfrev

+0

Gracias, buena solución. – Kyslik

3

El uso de jQuery .on() también podría resolver su problema. Utilizar de esta manera:

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

jsfiddle

0

utilizar la función en vivo, por lo general hace que funcione ...

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

// CODE HERE 

}); 
+1

.live (y .delegate) están en desuso desde jQuery 1.7. Deberíamos usar .bind o .on para adjuntar un evento a un selector. .bind no asociará el evento a los elementos que se anexan dinámicamente al DOM donde .on adjuntará los eventos incluso si los elementos se anexan dinámicamente al DOM. –

0

Por favor, intente con el uso de cada en lugar de cambio/clic, que está trabajando bien, incluso primera vez en el IE, así como otros navegadores

no funciona una primera vez

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

}); 

Trabajo bien incluso la primera vez

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

}); 
0

que tenían el mismo problema: A continuación fix trabajado para mí:

En lugar de: $("#ltv-dialog input").change(function() {

utilicé: $('#ltv-dialog').on('input', function() {

Cuestiones relacionadas