JavaScript 在 IE9 中随机失败/包含 DIV 的 FORM 标记在 IE9 中过早关闭

Question

问题的主要要点是随机命令似乎在 IE9 中不起作用，或者只是偶尔起作用。在其他页面上运行的命令就好了。

我已经排除了一些我不需要的东西，所以现在页面上只有两个 javascript。一个是jQuery 2.0.3，一个是页面主动作脚本：

$(function()
    {
    $("#lib").addClass("this_page");

    $(".output").each(convert_values);

    $("form .input_class").keyup(convert_values);
    $("form .input_class").change(convert_values);
    $(".swap").click(function($e)
        {
        var $form = $(this).closest("form");        
        var $input_value = $form.find(".input_units").val();
        var $output_value = $form.find(".output_units").val();
        $form.find(".input_units").val($output_value);
        $form.find(".output_units").val($input_value).change();
        $e.preventDefault();
        });
    });


function convert_values()
    {
    var $form = $(this).parent();
    var $input = $form.find(".input").val();
    $form.find(".input").removeClass("input_error");
    var $input_units = $form.find(".input_units").val();
    var $output_units = $form.find(".output_units").val();
    var $result = 0;

    if ($input == "") { $input = "0"; }

    console.log("data-type='"+$form.attr("data-type")+"'");
    if ( $form.attr("data-type") == "temp" )
        {
        switch ( String($input_units) + String($output_units) )
            {
            case "fc":
                $result = (Number($input) - 32) * (5/9); break;
            case "fk":
                $result = ((Number($input) - 32) * (5/9)) + 273.15; break;
            case "cf":
                $result = (Number($input) * 1.8) + 32; break;
            case "ck":
                $result = Number($input) + 273.15; break;
            case "kc":
                $result = Number($input) - 273.15; break;
            case "kf":
                $result = ((Number($input) - 273.15) * 1.8) + 32; break;
            default:
                $result = $input;
            }
        }
    else
        {
        console.log("("+$input+" / "+$output_units+") * "+$input_units);
        $result = (Number($input) / Number($output_units)) * Number($input_units);
        }

    if (isNaN($result))
        {
        //play_a_sound("snd_fail");
        $form.find(".input").addClass("input_error");
        $result = "Input Error";        
        }

    $form.find(".output").val($result);
    }

这个结果很奇怪。我的 convert_values( ) 函数在页面加载时被调用了几次，它似乎工作正常。但是当您在页面加载后通过单击选择来调用它时，它不起作用。

更具体地说，

var $input = $form.find(".input").val();
var $input_units = $form.find(".input_units").val();
var $output_units = $form.find(".output_units").val();

这三行在脚本加载后运行了几次。但稍后在脚本中， $output_units 在调用函数时未定义。这个函数和事件处理程序用于处理几个不同的单独 HTML 表单，这就是为什么没有特定的 ID，只有类和 $(this) 基于标识符的原因。但是为什么这些命令中的 2 个可以工作，而第三个却不行呢？为什么有时候能用，其他时候不行。

此外，可能在此之前，还有此检查：

if ( $form.attr("data-type") == "temp" )

大部分表格没有这个属性。并且处理正常。但是在页面的中间，一个表单确实有这个属性。但是IE9还是returns"undefined"从此。 IE9 确实支持 HTML5 数据属性，所以没有明显的原因说明它不起作用。

根据我当前登录到控制台的内容，您可以看到前三个值何时正常工作，以及其中一个何时中断且不起作用。当 IE9 错过 data-type="temp" 属性时，同样的调试日志记录也会向您显示，因为您最终在数学中得到了字符串，因为程序流没有针对这种特殊情况进行重定向。

如此随机、完全有效的命令似乎无缘无故地失败了。但该行为是 100% 可重复的。在目前的情况下，我在 IE9 的 JS 控制台中没有收到任何相关错误。好像我的代码中有什么东西导致 IE9 失控，但我不知道它是什么。

有问题的网页在这里： http://www.whatsmyip.org/lib/unit-converter/

该页面的 javascript 文件位于： http://www.whatsmyip.org/js/tools/lib/unit-converter.js

页面上的每个转换器都是它自己的 FORM 标签，"Temperature" 表单是带有数据类型属性的，IE9 似乎无法读取。在它无法读取之后，似乎 THEN 它也开始无法读取 $form.find(".output_units").val();虽然它以前可以很好地阅读。

尽管我讨厌所有 IE，但我还没有准备好放弃 IE9。我网站上几乎每个页面上都有很多脚本，但这是我遇到的唯一问题。所有其他页面都很好用。我在虚拟机中进行了大量的 Beta 测试。

Answer 1

P 标签不能包含块级项目。我原来的 HTML 包含很多这样的表格：

<p>
<form>
      blahblah
      <div>Divider</div>
      dfasdfasdf
</form>

尽管 FORM 是一个块标签，但此代码是有效的，因为 P 是自关闭标签，因此 FORM 关闭了 P。但是在 IE9 中，具体而言，此设置会导致FORM 标记进入我将称之为 "function-like-shit-mode" 的位置，其中 FORM 内的任何块项目都将关闭 FORM，然后是 P.

这个错误，在我的特定代码中，导致我的一半表单元素呈现在表单的外部。这只有在我开始摆弄 CSS 的所有东西时才清楚。在我的表单周围画了一个边框，看看，只有一半的表单元素在边框内！

所有这一切的结果是，我的 Javascript 无法找到它需要的所有值，因为我通过在 FORM 中搜索特定的类来找到 SELECT。现在更奇怪的是，它可以正确处理大多数 onLoad 表单，但之后会失败。就好像 FORM 正确呈现了一秒钟，然后 "snapping" 回到有问题的版本，排除了一半的项目。

所以总而言之，我删除了每个FORM标签前面的P标签，现在IE9在功能上已经完全正常了。我的表单现在可以毫无问题地包含 DIV。

JavaScript 在 IE9 中随机失败/包含 DIV 的 FORM 标记在 IE9 中过早关闭

JavaScript Failing in IE9 Randomly / FORM Tag Containing DIV Closing Prematurely in IE9

javascript

jquery

internet-explorer-9