AJAX调用outerHTML uncaught

Question

在CMS环境中实现此代码时。得到贝罗的错误。

未定义的TypeError:无法读取未定义的属性“outerHTML”

有人能帮我解决这个问题吗？

提前感谢

Main.html:

<div class="pwrapper">
                  <select name="country" id="scountry">
                    <option id="EN" value="global.html">GLOBAL, ENGLISH</option>
                    <option id="AU" value="australia.html">AUSTRALIA</option>
                  </select>
              </div>
              <script type="text/javascript">
                  $(document).ready(function ()  {                       
                      $('.country #scountry').on('change', function(e){
                          var ajaxURL = $(this).val();
                          $.ajax({
                              url: ajaxURL,
                              success: function(data) {
                                  var htmlData = $(data);
                                   $('#scontainer').html(htmlData.filter('#ajax-container').get(0).outerHTML);
                              }
                          });                          
                      });                          
                      $('.countrySelector #scountry').trigger('change');
                  });
              </script>
</div>

<div class="wrapper">
 <section class="no-padding">
     <div id="scontainer">
     </div>
 </section>
</div>

global.html (在main.html下作为子页面)：

<div id="ajax-container">
   Hello World!!
</div>

Answer 1

替换这一行：

htmlData.filter('#ajax-container').get(0).outerHTML

用这个代码

htmlData.find('#ajax-container').html();

Answer 2

这是使用load()的理想情况，这是$.ajax的一种快捷方法。

您可以将当前的$.ajax请求和回调替换为：

$('#scontainer').load(ajaxURL +' #ajax-container);

在url之后的空格分隔选择器用于确定请求的html响应的哪些片段插入到容器中。如果返回的唯一根元素是所需的id，则不需要对片段进行任何筛选，并且可以删除片段选择器。

参考资料：load()文档