快捷導(dǎo)航

jQuery不兼容input的change事件問題解決過程

更新時間：2014年12月05日 09:31:49 投稿：hebedich

本文記錄了在項目中發(fā)現(xiàn)在IE9中不會立即觸發(fā)change事件，存在兼容問題的解決過程，非常的詳盡，解決過程中也有新問題出現(xiàn)，最終都解決完畢，完美實現(xiàn)了兼容各大主流瀏覽器

最近開發(fā)一個項目，需要實現(xiàn)用戶在WEB表單里的多個INPUT框中輸入數(shù)量后，立即自動計算加總各項輸入的數(shù)量之和，并顯示在指定的INPUT框中，這個功能實現(xiàn)的原理是簡單的，就是只需要在INPUT的onchange事件中計算加總并將結(jié)果賦給指定的INPUT框中即可實現(xiàn)，代碼如下：

復(fù)制代碼代碼如下:

$("input.syxcost").change(function(){

   computeReceivedsyxcost();

}

function computeReceivedsyxcost(){  //計算加總

              var syxcost=0;

              $("input.syxcost").each(function(){

                 var cost=parseFloat($(this).val());

                 if (!isNaN(cost))

                    syxcost=syxcost + cost;

              });

              $("#receivedsyxcost").val(syxcost); //顯示最終結(jié)果

           }

原以為這樣就解決了，在谷歌瀏覽器確實是OK的，但在IE 9中，卻發(fā)現(xiàn)在INPUT中輸入數(shù)量后，并不會立即觸發(fā)change事件，存在兼容問題，在網(wǎng)上搜了許多，也都說存在這個問題，沒有辦法，我就只有自己來依據(jù)實現(xiàn)情況來寫，我的思路是：當INPUT獲取焦點時，就獲取當前的VALUE并存入該INPUT的自定義的屬性中（如：data-oval），然后在INPUT失去焦點的時候，就獲取當前的VALUE與之前存在自定義的屬性中的值是否相同，若不相同，則說明VALUE被改變，就需要重新計算，否則忽略，實現(xiàn)代碼如下：

復(fù)制代碼代碼如下:

$("input.syxcost").focus(function(){

                $(this).attr("data-oval",$(this).val()); //將當前值存入自定義屬性

            }).blur(function(){

                var oldVal=($(this).attr("data-oval")); //獲取原值

                var newVal=($(this).val()); //獲取當前值

                if (oldVal!=newVal)

                {

                    computeReceivedsyxcost(); //不相同則計算

                }

            });

經(jīng)反復(fù)驗證，在所有的瀏覽器下均顯示正常，解決了兼容的問題！

您可能感興趣的文章: