Question

以下代码在非ajax环境中正常运行。

<div id="target">
  <script>
      var thisScript1 = $('script').filter(':last');
      $(document).ready(function () {
          console.log(thisScript1.closest('div').attr('id')); // prints 'target'
      });
  </script>
</div>
<div id="second">
  <script>
      var thisScript2 = $('script').filter(':last');
      $(document).ready(function () {
          console.log(thisScript2.closest('div').attr('id')); // prints 'second'
      });
  </script>
</div>

如果我使用Ajax重新加载具有相同内容的div'target'，$('script').filter(':last')将引用页面的最后一个脚本，而不再是当前脚本。

<div id="target"> // reloaded using Ajax
  <script>
      var thisScript1 = $('script').filter(':last');
      $(document).ready(function () {
          console.log(thisScript1.closest('div').attr('id')); // prints 'second'
      });
  </script>
</div>
<div id="second">
  <script>
      var thisScript2 = $('script').filter(':last');
      $(document).ready(function () {
          console.log(thisScript2.closest('div').attr('id')); // prints 'second'
      });
  </script>
</div>

就像当前脚本插入旧的（我猜）但是在加载时正确执行。

如何在Ajax环境中获得所请求的行为？

Answer 1

这就是我认为正在发生的事情。当您没有执行ajax请求时，此脚本首先运行

<div id="target">
  <script>
      var thisScript1 = $('script').filter(':last');
      $(document).ready(function () {
          console.log(thisScript1.closest('div').attr('id')); // prints 'target'
      });
</script>

在执行此行var thisScript1 = $('script').filter(':last');时，唯一的脚本是div target中的脚本，因此选择器会将其选中。但是在执行ajax请求时，会重新加载内容。

<div id="target"> // reloaded using Ajax
  <script>
      var thisScript1 = $('script').filter(':last');
      $(document).ready(function () {
          console.log(thisScript1.closest('div').attr('id')); // prints 'second'
      });
  </script>
</div>

因此，当执行此行var thisScript1 = $('script').filter(':last');时，文档中有多个脚本。因此，您确实需要在此处选择第一个脚本而不是最后一个脚本。

您应该使用:first选择第一个脚本，使用:last来获取第二个脚本。因此，改变它应该适用于两种环境。

<div id="target">
  <script>
      var thisScript1 = $('script').filter(':first'); 
      $(document).ready(function () {
          console.log(thisScript1.closest('div').attr('id')); // prints 'target'
      });
  </script>
</div>
<div id="second">
  <script>
      var thisScript2 = $('script').filter(':last');
      $(document).ready(function () {
          console.log(thisScript2.closest('div').attr('id')); // prints 'second'
      });
  </script>
</div>

或者像frederic建议的那样，给他们id来唯一地识别它们，然后使用这些id来选择那些脚本。

引用以ajax形式加载当前正在执行的脚本的脚本标记

1 个答案: