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