2016-10-01 10 views
1

<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インスペクタに行われた変更なしのテーブルです:

enter image description here

:ここenter image description here

は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"); 
    } 
}); 

答えて

0

私は、Frozenexが提案したようなやり方をしました。私の元々の問題では、<table>の内臓をすべてMVCの部分表示として返された<tr>のリストに置き換えました。

修正のため、ちょうど<tr>ではなく、<table>要素を部分に追加しました。次に、<table>の入れ替えの代わりに、テーブル全体(部分の外)にラッパー<div>を置き、その内容を固定部分に置き換えました。

非常に簡単に修正できます。

0

また、問題を修正するための一時的な解決策は、成功コールバックでテーブル全体を更新することだけでした。

関連する問題