reference現在実行中のスクリプトをajax形式でロードしたスクリプトタグ

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>​ 

私は、もうアヤックス、$('script').filter(':last')参照最後のページのスクリプトではなく、現在のものを使用して、同じコンテンツを持つdiv要素「ターゲット」をリロードします。

<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');文書内に複数のスクリプトがあります。したがって、最後のスクリプトではなく最初のスクリプトを実際に選択する必要があります。

2番目のスクリプトを取得するには、: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>​ 

それともフレデリックのようなそれらのスクリプトを選択するには、これらのIDを使用して、一意に識別するために、それらにIDを与え、提案しました。