logo标签列表

jQuery .change()事件在IE中无法触发

javascriptjqueryjquery-ui
10

我有一个对话框，需要依赖三个输入字段进行计算。当它们中的任何一个被更改时，它都会检查它们是否都已填写并进行处理并给出响应。

在 Firefox、Chrome、Opera 等浏览器中完全正常，但在任何版本的 IE 中都无法工作。我的 jQuery 其他部分都可以正常工作，但我无法确定问题发生在哪里。我认为可能与 .change() 事件或多事件绑定有关，但我真的不知道。

以下是有问题的代码：

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

并且相关的HTML代码如下：

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

更新

更改事件似乎会触发，但只有当文本框从一个值变为null时才会触发。

你有检查控制台的错误吗？ - Rory McCrossan
1
我认为以下帖子会对你有所帮助：https://dev59.com/sHVC5IYBdhLWcg3wsTfv - pascalvgemert
2
请展示相关的HTML代码。如果你正在使用单选按钮或复选框，那么你可能希望监听.click()而不是.change()。 - jfriend00
这是IE的一个bug，请参考此前的讨论 - https://dev59.com/_XI-5IYBdhLWcg3w3cg8 - jaz9090
1
当我尝试运行它时，它可以工作：http://jsfiddle.net/EEe4w/ 但是代码中有一个逻辑错误。如果 LTV 恰好为 85％，则会得到大于 85％ 的消息，因为代码中使用 <85。 - Guffa
显示剩余5条评论
5个回答
10

如果您的目标是文本输入元素，是否尝试使用不同的事件呢？例如，不使用change事件，而使用keyup事件？像这样：$("#ltv-dialog input").keyup(function() {。这将在每次按键后触发。

这个完美地运行了 - 甚至比我原来想要实现的还要好。 - unfrev
这只是一种变通办法，而不是解决方案。Change和Keyup只是不同的事件。 - Max
@Max，“Change”事件等待您完成与输入字段的交互并离开它，例如当您完成输入并离开输入时。 “keyup”将在您按下键盘上的每个键时触发，即在您输入时。 - Richard Parnaby-King
@Richar 我知道。这就是为什么我在答案中没有看到解决方案的原因。如果用户想要每次按下按钮时触发事件，那么问题应该不同。尽管如此，你的答案似乎已经满足了提问者的需求 - 所以我们都可以感到高兴。 :) - Max
4
使用jQuery的.on()也可能解决您的问题。使用方法如下：
jQuery("#ltv-dialog").on("change", "input", function(){
     alert("It works !");
     //your javascript/jQuery goes here
   }
);

jsfiddle

1
我遇到了同样的问题：以下修复方法对我有效：
不要使用：$("#ltv-dialog input").change( function() { 而是使用：$('#ltv-dialog').on('input', function() {
-1

请尝试使用每个代替更改/点击，这在IE以及其他浏览器中甚至第一次使用时都能正常工作

第一次不能运行

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

});

第一次就能正常工作

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

});
-2

使用live函数，通常可以使其正常工作...

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

// CODE HERE

});
1
.live（和.delegate）自jQuery 1.7起已被弃用。我们应该使用.bind或.on来将事件附加到选择器上。.bind不会将事件附加到动态添加到DOM中的元素，而.on即使元素动态添加到DOM中也会附加事件。 - Tomer Almog
.live在IE浏览器上无法使用。 - Abhishek
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接