CSS類不適用於帶有JQuery 3.0的AJAX內容

我將<tr>和<td>標籤動態添加到表中。 <table>本身是靜態的，還有它的屬性。我遇到的問題是table table-bordered table-striped table-hover類不適用於錶行。但是，如果我簡單地從我的DOM檢查器中刪除類並將它們逐字地粘貼回來，則樣式會生效。CSS類不適用於帶有JQuery 3.0的AJAX內容

我將問題縮小到升級到JQuery 3.x.x（特別是3.1.1是我正在使用的）。我的代碼庫已經在JQuery 2.2.4上運行，並且在嘗試升級後我只能看到這些問題。

這裏是沒有的DOM檢查所做的更改表：

下面是表後僅切割CSS班列，並直接將其粘貼回：

相關HTML：

<table class="table table-bordered table-striped table-hover" style="" id="multipleResultsTable"> 
<tr> 
    <th style="" class="checkBoxForMerge"> 
     Select 
     <input data-val="true" data-val-required="The SimilarAccounts field is required." id="SimilarAccounts" name="SimilarAccounts" type="hidden" value="True"> 
    </th> 
    <th>Account Name</th> 
     <th>Owner</th> 
</tr> 
    <tr class="searchable"> 
     <td style="" class="checkBoxForMerge" data-guid=""> 
      <input class="insured-selector" data-val="true" data-val-required="The Selected field is required." id="generic_Selected" name="generic.Selected" type="checkbox" value="true"><input name="generic.Selected" type="hidden" value="false"> 
     </td> 
     <td data-guid=""> 
      <a class="multipleResults" data-action-url="" data-guid="">Result 1</a> 
     </td> 
      <td> 
       <ol> 
         <li> 
          <strong>Harley Quinn</strong></li> 
       </ol> 
      </td> 
    </tr> 
    <tr class="searchable"> 
     <td style="" class="checkBoxForMerge" data-guid=""> 
      <input class="insured-selector" id="generic_Selected" name="generic.Selected" type="checkbox" value="true"><input name="generic.Selected" type="hidden" value="false"> 
     </td> 
     <td data-guid=""> 
      <a class="multipleResults" data-action-url="" data-guid="">Result 2</a> 
     </td> 
      <td> 
       <ol> 
         <li> 
          <strong>Floyd Lawton</strong></li> 
       </ol> 
      </td> 
    </tr> 
</table>

相關JQuery：

我嘗試手動刪除類並通過JQuery將它們添加回來（請參閱下面的註釋代碼），但它也不成功。

var multipleResultsTable = $("#multipleResultsTable"); 
var mergeTool = $("#mergeTool"); 
var searchString = $("#searchString"); 

$.ajax({ 
    type: "POST", 
    url: action, 
    data: { searchString: searchString }, 

    success: function (data) { 
     if (data.Url !== undefined) 
      window.location.href = data.Url; 
     else { 
      multipleResultsTable.html(data); 
      multipleResultsTable.show(); 
      if ($('#SimilarAccounts').val() === "True") { 
       mergeTool.show(); 
       $('.checkBoxForMerge').show(); 
      } 
      //multipleResultsTable.removeClass('table table-bordered table-striped table-hover'); 
      //multipleResultsTable.addClass('table table-bordered table-striped table-hover'); 
     } 
    }, 
    error: function() { 
     bootbox.alert("Error showing search results"); 
    } 
});

來源

2016-10-01 chemoroti

我結束了一些Frozenex的建議。對於我原來的問題，我將<table>中的所有內容替換爲作爲MVC部分視圖傳回的<tr>的列表。

爲了解決這個問題，我剛剛添加了一個<table>元素，而不是僅包含<tr> s。然後，我沒有更換<table>的內膽，而是在整個桌子周圍（部分外部）放置了一個包裝<div>，而是用固定的部分替換了它的內容。

很容易修復。

來源

2017-08-07 16:17:16 chemoroti

也有同樣的問題......只有解決問題的臨時解決方案是在成功回調中更新整個表。

來源

2016-11-26 11:56:50 Frozenex

CSS類不適用於帶有JQuery 3.0的AJAX內容

回答

相關問題