jQuery的AJAX：更新與響應腳本內

Question

我使用jQuery AJAX來加載（和刷新），我的網頁的一部分頁面的兩個部分

這裏是jQuery的功能在我的主頁：

function updateCategories(){ 
    catList = $('#cat_list'); 
    catList.hide(); 
    //send the post to shoutbox.php 
    $.ajax({ 
     type: "POST", url: "../ajax/products-categories.php", data: "action=refresh", 
     complete: function(data){ 
      catList.html(data.responseText).fadeIn(); 
     } 
    }); 
} 
$(document).ready(function(){ 
    updateCategories(); 
}); 

而這裏的請求的文件（「../ajax/products-categories.php」）：

<ol id="categories"> 
    <li>Item 1 <span class="actions">Edit | Delete</span</li> 
    <li>Item 2 <span class="actions">Edit | Delete</span</li> 
    <li>Item 3 <span class="actions">Edit | Delete</span</li> 
</ol> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#categories li").hover(function(){ 
     $("span.actions", this).css("visibility", "visible") 
    },function(){ 
     $("span.actions", this).css("visibility", "hidden") 
    }); 
</script> 

沒問題，直到在這裏，一切都很好，漂亮的工作：在加載內容，並當我徘徊'李的.actio NS跨度都正確顯示/隱藏

但我必須更新兩個部分我的網頁，所以我會更新這個辦法：

function updateCategories(){ 
    catList = $('#cat_list'); 
    catSelect = $('#cat_select'); 
    catList.hide(); 
    catSelect.hide(); 
    //send the post to shoutbox.php 
    $.ajax({ 
     type: "POST", url: "../ajax/products-categories.php", data: "action=refresh", 
     complete: function(data){ 
      catSelect.html($('#tempSelect',data.responseText).html()).fadeIn(); 
      catList.html($('#tempList',data.responseText).html()).fadeIn(); 
     } 
    }); 
} 
$(document).ready(function(){ 
    updateCategories(); 
}); 

和請求的頁面：

<div> 
    <div id="tempSelect"> 
     bla bla bla 
    </div> 
    <div id="tempList"> 
     <ol id="categories"> 
      <li>Item 1 <span class="actions">Edit | Delete</span</li> 
      <li>Item 2 <span class="actions">Edit | Delete</span</li> 
      <li>Item 3 <span class="actions">Edit | Delete</span</li> 
     </ol> 
     <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#categories li").hover(function(){ 
       $("span.actions", this).css("visibility", "visible") 
      },function(){ 
       $("span.actions", this).css("visibility", "hidden") 
      }); 
     </script> 
    </div> 
</div> 

那麼，「tempList」「ol」已加載，但「懸停腳本」不再有效... 爲什麼會這樣？有解決方案嗎？ 我修理把「懸停腳本」放在主頁面，但沒有運氣...... 請問，你能幫我嗎？謝謝...

Answer 1

您不能將事件正常綁定到尚未創建的元素。

在您的主頁試試這個：

$(function() { //on dom ready 
     $('#categories li').live('mouseover mouseout',function(){ 
      if (event.type == 'mouseover') { 
      // do something on mouseover 
     $("span.actions", this).css("visibility", "visible"); 
      } else { 
      // do something on mouseout 
      $("span.actions", this).css("visibility", "hidden"); 
      } 
     }); 
}); 

Answer 2

你爲什麼不將腳本添加到完整的功能，避免每次發送它呢？ 其他選項將在返回的代碼中添加自己的分隔符，以便您可以將返回分成3個塊，並根據需要使用它們，避免使用導致問題的部分$（selector，text）。

編輯：

檢查你的代碼這個工作，而且沒有太多的hackish後。

function updateCategories(){ 
    catList = $('#cat_list'); 
    catSelect = $('#cat_select'); 
    catList.hide(); 
    catSelect.hide(); 
    //send the post to shoutbox.php 
    $.ajax({ 
     type: "POST", url: "ajax.php", data: "action=refresh", 
     complete: function(data){ 
      data = data.responseText.split("###"); 
      if (data.length >= 3) { 
       catSelect.html(data[0]).fadeIn(); 
       catList.html(data[1]).fadeIn(); 
       div = document.createElement("div"); 
       div.innerHTML = data[2]; 
       document.body.appendChild(div); 
      } 
     } 
    }); 
} 
$(document).ready(function(){ 
    updateCategories(); 
}); 

，而PHP的內容：

<div id="tempSelect">blah blah blah</div> 
### 
<div id="tempList"> 
    <ol id="categories"> 
     <li>Item 1 <span class="actions">Edit | Delete</span></li> 
     <li>Item 2 <span class="actions">Edit | Delete</span></li> 
     <li>Item 3 <span class="actions">Edit | Delete</span></li> 
    </ol> 
</div> 
### 
<script type="text/javascript"> 
     // <![CDATA[ 
     $(document).ready(function(){ 
      $('#categories li').mouseover(function(e) { 
       e.stopPropagation(); 
       $('> .actions', this).css('visibility', 'visible') 
      }); 
      $('#categories li').mouseout(function(e) { 
       e.stopPropagation(); 
       $('.actions').css('visibility', 'hidden') 
      }) 
     }); 
     // ]]> 
</script>