jQuery ajax 混合 html/js <script> 避免 <script> 打开时丢失上下文

Question

我面临以下情况。 我使用 ajax 与使用混合 html/js 代码响应的后端进行通信。我使用 html() 函数在 div 中加载我的内容 - 即$("#mydiv").html(ajaxResponse);

但是，嵌入在ajaxResponse 中<script> 标记中的js 代码在全局（窗口）上下文中运行，而不是我预定义的。

在这种情况下有什么办法可以改变执行的上下文吗？

代码如下所示

index.html:

<div id="mydiv"></div>
<script type="text/javascript">
$(function(){
   $.ajax({
      url: '/myAjaxResponse.html',
      context: $(this),
      success: function(resp) { $("#mydiv").html(resp); }
   });
});
</script>

myAjaxResponse.html：

<!-- Some html... really just anything :) -->
<script type="text/javascript">
    console.log($(this));   // $(this) points to window object :(
</script>

Answer 1

编辑：呃，等等，我才意识到我误解了你的问题……

由于您要插入到 DOM 中，所有通过 XHR 加载的 JS 都自动在 window 范围内 - 而且，afaik，没有合适的方法解决这个问题。 $.ajax() 的所有context 选项所做的，就是在回调函数中设置this 的值。

（另外，请查看 this answer，它比我能更好地解释事情）。

一种可能的方法是设置一个您可以稍后调用的全局变量（类似这些行）：

var context;

$(function(){
   context = $('whatever');
   $.ajax({
      url: '/myAjaxResponse.html',
      success: function(resp) { $("#mydiv").html(resp); }
   });
});

myAjaxResponse.html：

<script type="text/javascript">
    $this = context;
    console.log($this);   // $this points to whatever you set context to before XHR
</script>

---

长话短说：$(this)，在您调用$.ajax() 的上下文中，确实指向window。

你可以/应该选择

$(function(){
   $.ajax({
      url: '/myAjaxResponse.html',
      context: $('#mydiv'),
      success: function(resp) { $("#mydiv").html(resp); }
   });
});

或（有点奇怪）与

$(function(){
   $('#mydiv').each(function(){
       $.ajax({
          url: '/myAjaxResponse.html',
          context: $(this),
          success: function(resp) { $("#mydiv").html(resp); }
       });
   })
});

… 其中this 指向被$.each() 迭代的元素。