仅在Firefox中存在JQuery AJAX异常：“无法在层次结构中的指定点插入节点”（HierarchyRequestError）

Question

一个非常奇怪的问题：我有一个分为两部分的下拉菜单，其中选择一个州将添加第二个下拉菜单，为您提供该州的MSA区域列表。

使用对控制器的JQuery Get请求来完成此操作，该控制器返回Select下拉列表中的Areas列表，例如

jQuery(function($) {
  // when the #area_state field changes
  $("#area_state").change(
    function() {
      // make a call and replace the content
      var state = $('select#area_state :selected').val();
      if(state == "") state="0";
      jQuery.get(
        '/getmsas/' + state,
        function(data){ $("#msas").html(data); }
      )
    return false;
    }
  );
})

注意-此代码改编自此处的教程：http : //www.petermac.com/rails-3-jquery-and-multi-select-
dependencies/

这在Chrome和IE上可以正常工作，但在Firefox（13.0.1）中却无法正常工作，从而产生两个错误：

Error: junk after document element
Source File: http://localhost:3000/getmsas/Connecticut
Line: 2, Column: 1
Source Code:
<select id="area_msa" name="area[msa]"><option value="">Select Area (Optional)</option>

和

Error: uncaught exception: [Exception... "Node cannot be inserted at the specified point
in the hierarchy"  code: "3" nsresult: "0x80530003 (HierarchyRequestError)"  location:   
"http://localhost:3000/assets/jquery.js?body=1 Line: 6498"]

Answer 1

因此，我强行提出了一个解决方案。我还不太了解为什么这个问题是特定于Firefox的，但是可以对其进行调查。

我能够通过为dataType（get方法的最后一个参数）添加一个参数来显式地将其声明为html来解决此问题。

Get在此处的JQuery文档中进行了描述：http :
//api.jquery.com/jQuery.get/

jQuery.get( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

因此，有效的代码是通过添加“ html”作为dataType参数：

jQuery(function($) {
  // when the #area_state field changes
  $("#area_state").change(
    function() {
      // make a call and replace the content
      var state = $('select#area_state :selected').val();
      if(state == "") state="0";
      jQuery.get(
        '/getmsas/' + state,
        function(data){ $("#msas").html(data); },
        "html"
        // ABOVE LINE IS THE FIX
      )
    return false;
    }
  );
})

同样，我需要调查为什么这是特定于Firefox的；这让我发疯，所以希望它可以帮助某人。