JS insertBefore/preprend Ajaxコール後に動作しません

Question

私はこのコンテナから移動したいコンテナ内にdivを持っています。

<li class="item last"> 
<div class="product-info" id="product-info"> 
    <p class="special-price-label" id="special-price-label"> 
     <span class="price percent-label"> 
      <span class="percent-label-inner-container"> 
       <span class="percent-label-label">SPAR</span> 
       <span class="percent-label-value">42%</span> 
      </span> 
     </span> 
    </p> 
</div> 
</li> 

私はHTMLが、このなるよう.productインフォ容器の外＃特別価格ラベルを移動したい：ここにあるHTMLこれはこれでうまく働い

<li class="item last"> 
<p class="special-price-label" id="special-price-label"> 
    <span class="price percent-label"> 
     <span class="percent-label-inner-container"> 
      <span class="percent-label-label">SPAR</span> 
      <span class="percent-label-value">42%</span> 
     </span> 
    </span> 
</p> 
<div class="product-info" id="product-info"> 

</div> 
</li> 

はJS：

<script type="text/javascript"> 
(function($) { 
$('#special-price-label').each(function() { 
    $(this).insertBefore($(this).parent()); 
}) 
}) (jQuery); 
</script> 

しかし、私はページ（それが製品とカテゴリページです）にアヤックスでいくつかのInfiniteScrollを入れた後、それはもう動作しません。

また、私は運がなくて、代わりにこのコードを試してみました：

<script> 
$(document).ready(function() { 
    $("#special-price-label").prependTo("li.item"); 
}); 
</script> 

あなたは私を助けることができますか？

Answer 1

1. idは、ページ内で正確に1回使用する必要があります。いくつかのコンテナ/ DOMノードの複数の/繰り返しのインスタンスがある場合は、classを使用します。

2. $(document).ready()は、DOMが準備が整っていて、一般にAjaxコールが行われる前に発生します。

あなたの質問に来て、ここにあなたが何をすべきかです：

1. という名前の関数
2. この関数を呼び出し、一度（ページのロード時の初期項目のためのDOM readyでのあなたのDOM移動操作をラップ）
3. コールAJAX呼び出しのsuccessコールバックでこの機能

ここには役に立つかもしれないJSfiddleがあります.Ajaxコールの代わりに、より多くのアイテムを動的に追加するボタンがあります。同様にあなたのajax呼び出しを試みるかもしれません。