javascript - 使用 jquery 隐藏按钮不起作用

Question

我在 Asp MVC 中有一个部分类，如下所示:

<div class="table-responsive">
  <table class="table" id="tbl_visitors" data-animate="fadeInRight">
    <thead>
      <tr>
        <th>
          @Html.DisplayNameFor(model => model.VisitorId)
        </th>
        <th>
          @Html.DisplayNameFor(model => model.FirstName)
        </th>
        <th>
          @Html.DisplayNameFor(model => model.LastName)
        </th>
        <th>
          @Html.DisplayNameFor(model => model.TicketId)
        </th>
        <th>
          @Html.DisplayNameFor(model => model.RequestStatus)
        </th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      @foreach (var item in Model) {
      <tr>
        <td>
          @Html.DisplayFor(modelItem => item.VisitorId)
        </td>
        <td>
          @Html.DisplayFor(modelItem => item.FirstName)
        </td>
        <td>
          @Html.DisplayFor(modelItem => item.LastName)
        </td>
        <td>
          @Html.DisplayFor(modelItem => item.TicketId)
        </td>
        <td>
          @Html.DisplayFor(modelItem => item.RequestStatus)
        </td>
        <td id="item_checkbox">
          @if (item.RequestStatus != "Pending") {
          <input id=@item.VisitorId checked="checked" class="use-this switch-toggle switch-flat-mini switch-toggle-flat" type="checkbox">
          <label for=@item.VisitorId></label>
          } else {
          <input id=@item.VisitorId class="use-this switch-toggle switch-flat-mini switch-toggle-flat" type="checkbox">
          <label for=@item.VisitorId></label>
          }
        </td>
        <th>
          <a href="javascript:void(0);" onclick="deletevisitor(@item.VisitorId, @item.TicketId ) ">Remove</a>
        </th>
      </tr>
      }
    </tbody>
  </table>
</div>
<div class="alignright" id="div_btn_approve">
  <button id="btn_approve_ticket" class="button button-border button-rounded button-green">Approve</button>
</div>

以及一个用于禁用“索引” View 中部分 View 中按钮的脚本，如下所示:

function getVisitorsOfApprovedTicket(ticketId, requestedBy, schedule) {
  var url = '/Member/GetVisitorViaTicketId?ticketId=' + ticketId;
  $("#div_approved_ticket_visitors").load(url);
  $("#hidden_created_by").val(requestedBy);
  //$("#btn_approve_ticket").prop( "disabled", true );
  $("#btn_approve_ticket").hide();
}

当我尝试通过创建脚本将其隐藏在部分 View 中时，它会隐藏按钮，但为什么当我调用部分 View 时它在索引 View 中不起作用？你能告诉我如何正确地做吗？谢谢。

Answer 1

因为 .load 尚未完成，并且您尝试 .hide() 一个不存在的元素:

function getVisitorsOfApprovedTicket(ticketId, requestedBy, schedule) {
  var url = '/Member/GetVisitorViaTicketId?ticketId=' + ticketId;
  // this is a async process
  $("#div_approved_ticket_visitors").load(url);
  $("#hidden_created_by").val(requestedBy);
  //$("#btn_approve_ticket").prop( "disabled", true );
  // you are trying to hide an element that is not present yet.
  $("#btn_approve_ticket").hide();
}

如果您想隐藏此 var url = '/Member/GetVisitorViaTicketId?ticketId=' + TicketId; View 内的元素。您需要先等待它加载才能继续:

function getVisitorsOfApprovedTicket(ticketId, requestedBy, schedule) {
  var url = '/Member/GetVisitorViaTicketId?ticketId=' + ticketId;
  // this is a async process
  $("#div_approved_ticket_visitors").load(url, function () {
    // this function is called after its done
    // here you can safely hide the element
    $("#btn_approve_ticket").hide();
  });
  $("#hidden_created_by").val(requestedBy);
  //$("#btn_approve_ticket").prop( "disabled", true );
}

希望有帮助