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

Question

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

但是，<script>中ajaxResponse标记中嵌入的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，没有正确的方法。 context的所有$.ajax()选项都在回调函数中设置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()迭代的元素。