如何改變的Ajax生成的HTML內容

Question

您好我有問題，改變HTML內容，這是由AJAX

產生這是網頁的代碼：

@model IEnumerable<WE_SRW_PeerNissen.Models.Reservations> 

@{ 
    ViewBag.Title = "List"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<h2>Übersicht Liste</h2> 


<form method="post" action="List"> 
    <div class="input-group"> 
     <div class="input-group-btn"> 
      <input type="text" class="form-control" name="searchbar" placeholder="Search"> 

      <button class="btn btn-default" type="submit"> 
       <i class="glyphicon glyphicon-search"></i> 
      </button> 
     </div> 
    </div> 
</form> 

<table class="table" id="sorttable"> 
    <thead bgcolor="white"> 
     <tr> 
      <th> 
       @Html.DisplayNameFor(model => model.BookingNr) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.Arrival) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.Departure) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.Name) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.Appartment) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.Adult) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.Children) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.Total) 
      </th> 
     </tr> 

    </thead> 

</table> 
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" /> 
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script> 
    <script> 
    $(document).ready(function() { 
     $('#sorttable').DataTable({ 
      "ajax": { 
       "url": "/OverView/loaddata", 
       "type": "GET", 
       "datatype": "json" 
      }, 
      "columns": [ 
       { "data": "BookingNr", "autoWidth": true }, 
       { "data": "Arrival", "autoWidth": true }, 
       { "data": "Departure", "autoWidth": true }, 
       { "data": "Name", "autoWidth": true }, 
       { "data": "Appartment", "autoWidth": true }, 
       { "data": "Adult", "autoWidth": true }, 
       { "data": "Children", "autoWidth": true }, 
       { "data": "Total", "autoWidth": true }, 
      ] 
     }); 
    }); 

</script> 

會產生什麼樣的一個例子：

<div class="dataTables_filter" id="sorttable_filter"> 
    <label>Search: 
      <input aria-controls="sorttable" type="search" placeholder=""> 
    </label> 
</div> 

我認爲這是我最好的嘗試：

<script> 
    $(document).ready(function() { 
     $(document).on(function() { 
      $('#sorttable_filter label:eq(1)').text('Suchen:'); 
     }); 
    }); 
</script> 

我設定的AJAX腳本下面，我也試圖把它放在下同腳本標籤以確保，即AJAX執行

Answer 1

幾點意見...

的jQuery（）方法將函數綁定到特定事件，如：$（something）.on（「click」，doSomething），並且您僅提供一個函數，因此它不知道將函數綁定到什麼事件。然後，eq（1）是jQuery方法，但不是CSS選擇器，因此您想使用「label：first-child」（如果您需要第一個孩子）。但是，它會破壞示例HTML中的輸入字段，因爲它位於標籤元素內部，所以您（可能）想將它放在外面。在這種情況下，當你無法改變HTML輸出，您可以使用「移動」輸入副本骯髒的黑客標籤元素之外......這樣

$(document).ready(function() { 
 
    var labelEl = document.querySelector("#sorttable_filter label:first-child"); 
 
    var inputEl = labelEl.querySelector("input"); 
 
    labelEl.parentNode.appendChild(inputEl); 
 
    labelEl.innerText = 'Suchen:'; 
 
});

什麼我不不像是document.ready（）可能會在實際元素出現之前發生一段時間，所以您希望至少查找結果HTML外觀...