如何在ajax調用後設置jquery切換位置

Question

我正在爲一款名爲eve的遊戲設置一個採礦計算器。

在我的計算器中，您可以從玩家列表中進行選擇，然後從礦石列表中進行選擇。

當您選擇玩家或礦石時，jQuery中會使用切換事件向玩家發信號通知玩家他/她已選擇了該物品。另外，ajax調用一個php腳本會觸發添加/刪除數據庫中的成員/礦石。

我遇到的問題是，儘管在之前已經加載了挖礦操作（已經有成員/礦石添加到其中）的情況下，玩家/礦石的切換事件仍然被設置爲如果它沒有已被選中。我已經有了防止添加重複玩家和礦石的PHP代碼，但我希望界面能夠向用戶顯示之前已選擇玩家或礦石。另外，由於玩家/礦石已經在之前的會議中被選中，所以我希望切換事件的第一個動作是用來不重視選擇並移除礦石的動作。

每個礦即是存儲在數據庫中與它TYPEID 下面一個rel標籤返回的運算的一部分的球員名單是什麼樣子的樣本：

<div class="miningMemberList"> 
    <div class="float" style="color: whitesmoke;"> 
     <input type="checkbox" class="cbox" name="option1" value="90892149" style="display: none; ">Glitch Rin 
    </div> 
    <div class="float" style="color: whitesmoke;"> 
     <input type="checkbox" class="cbox" name="option1" value="1162532926" style="display: none; ">Drake Firerain 
    </div> 
    <div class="spacer"> 
    </div> 
</div> 

下面是一個樣本的礦石列表看起來像：

<div class="oreList" style="display: block; "> 
    <div class="opOre" typeid="17428"> 
     Triclinic Bistot<img class="img_opOre" src="http://image.eveonline.com/Type/17428_32.png" alt="Triclinic Bistot"> 
    </div> 
    <div class="opOre" typeid="17429"> 
     Monoclinic Bistot<img class="img_opOre" src="http://image.eveonline.com/Type/17429_32.png" alt="Monoclinic Bistot"> 
    </div> 
    <div class="opOre" typeid="1227" style="background-color: rgb(57, 57, 57); color: rgb(245, 245, 245); "> 
     Omber<img class="img_opOre" src="http://image.eveonline.com/Type/1227_32.png" alt="Omber"> 
    </div> 
</div> 

以下是ajax調用返回的數據的示例。

<div id="opTableContainer"> 
    <from> 
    <table border="1" id="returnTable"> 
    <thead> 
    <tr> 
     <th> 
      Name 
     </th> 
     <th display="true" rel="17428"> 
      <img class="img_opOre" src="http://image.eveonline.com/Type/17428_32.png" alt="Triclinic Bistot">Triclinic Bistot 
     </th> 
     <th display="true" rel="17429"> 
      <img class="img_opOre" src="http://image.eveonline.com/Type/17429_32.png" alt="Monoclinic Bistot">Monoclinic Bistot 
     </th> 
     <th display="true" rel="1227"> 
      <img class="img_opOre" src="http://image.eveonline.com/Type/1227_32.png" alt="Omber">Omber 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td> 
      <img src="images/redXblackBackground.png" style="float: left;">Player 1 
     </td> 
     <td rel="17428"> 
      <input type="text" style="width:100px" name="17428"> 
     </td> 
     <td rel="17429"> 
      <input type="text" style="width:100px" name="17429"> 
     </td> 
     <td rel="1227"> 
      <input type="text" style="width:100px" name="1227"> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <img src="images/redXblackBackground.png" style="float: left;">Player 2 
     </td> 
     <td rel="17428"> 
      <input type="text" style="width:100px" name="17428"> 
     </td> 
     <td rel="17429"> 
      <input type="text" style="width:100px" name="17429"> 
     </td> 
     <td rel="1227"> 
      <input type="text" style="width:100px" name="1227"> 
     </td> 
    </tr> 
    </tbody> 
    </table> 
    <div class="spacer"> 
    </div> 
    <input type="button" value="Submit"></from> 
</div> 

下面是礦石切換事件的javascript樣例。玩家的切換事件幾乎相同。

$(".opOre").toggle(function(){ 
     $(this).css('background-color','#393939'); 
     $(this).css('color','whitesmoke'); 
     var urlQuery = location.search; 
    urlQuery = urlQuery.replace('?', ''); 
    var getVariable = urlQuery.split('='); 
    typeId = $(this).attr('typeid'); 
    //split[0] is your var name, and split[1] 
    /* ADD ORE TO OP TO DB */ 
    $.ajax({   
     type: "POST", 
     url: "thePHPManagementScript.php", 
     data: { action : 'addOre', opId : getVariable[1], typeId : typeId }, 
     success: function(data) { 
      $("#opTableContainer").empty(); 
      $("#opTableContainer").append(data); 
      var bodyRows = $("#returnTable tbody tr"); 
      bodyRows.each(function(){ 
       var firstCell = $(this).find('td').eq(0).text(); 
       console.log(firstCell); 
       $("#opSelectBox option").filter(function() { 
        return this.text == firstCell; 
       }).remove(); 
      }); 
     } 
     }); 
    },function(){ 
     $(this).css('background-color','black'); 
     var urlQuery = location.search; 
    urlQuery = urlQuery.replace('?', ''); 
    var getVariable = urlQuery.split('='); 
    typeId = $(this).attr('typeid'); 
    /* REMOVE ORE FROM OP FROM DB */ 
    $.ajax({   
     type: "POST", 
     url: "thePHPManagementScript.php", 
     data: { action : 'removeOre', opId : getVariable[1], typeId : typeId }, 
     success: function(data) { 
      $("#opTableContainer").empty(); 
      $("#opTableContainer").append(data); 
      var bodyRows = $("#returnTable tbody tr"); 
      bodyRows.each(function(){ 
       var firstCell = $(this).find('td').eq(0).text(); 
       console.log(firstCell); 
       $("#opSelectBox option").filter(function() { 
        return this.text == firstCell; 
       }).remove(); 
      }); 
     } 
    }); 
}); 

隨着運氣的問題，我以一種可以理解的方式提出這個問題。

我知道我做了什麼可能要成功完成：ajax請求的一部分，我只是不知道如何去解決這個問題。

Answer 1

您是否有鏈接可以查看問題，根據描述進行精神上的可視化處理。過去，我在動態加載的內容方面遇到了問題，可能只需將.live（）添加到切換器，以便它可以在加載的內容上工作。