0

我正在使用 ASP.NET MVC 4.0 来构建我的 Web 应用程序和弹出窗口的 jQuery 对话框插件。我打算将我的 HTML 元素放在 id 为“addDialog”的 div 元素中，然后弹出一个弹出窗口。弹出窗口应显示在单击 ID 为“添加”的按钮上，但它不起作用。每当我单击按钮时，什么都没有发生。

这是我的观点：

@{
  ViewBag.Title = "TimeSlotDetails";
}
<head>
  <title>TimeSlot</title>

  <link href="~/Scripts/DataTables/datatables.min.css" rel="stylesheet" />
  <link href="@Url.Content("~/Content/Common.css")" rel="stylesheet" type="text/css" />
  <link href="~/Scripts/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.css" rel="stylesheet" />
  <script src="~/Scripts/jquery-1.7.2.min.js"></script>
  <script src="~/Scripts/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
  <script src="~/Scripts/jquery.unobstrusive-ajax.min.js"></script>
  <script src="~/Scripts/DataTables/datatables.min.js"></script>
  <script src="~/Scripts/TimeSlotDetails.js"></script>
</head>

<body>
  <form>
    <div id="addDialog" style="display:none">

      Name<input type="text"/><br/><br/>
      Duration<input type="text"/><br/><br/>
      Type<input type="text"/><br/><br/>
      Frequency<input type="text"/><br/><br/>
    </div>
    <div class="title">Automatic Timetable Generator</div>
    <div class="title-down"></div>

    <table class="option_list">
      <tr>
        <td class="title-down" rowspan="16" colspan="3"></td>
        <td rowspan="16" colspan="5">
          <div></div>
          <div></div>
          <div>@Html.ActionLink("Home", "Home")</div>
          <div>@Html.ActionLink("Preferred Time Slot", "PreferredTimeslot")</div>
          <div>Time Slot Details</div>
          <div>Department Details</div>
          <div>Subject Details</div>
          <div>ClassRoom Details</div>
          <div>Lab Details</div>
          <div>Allot the Slots for each classRoom as per your need</div>
          <div>Teacher Details</div>
          <div>Allot Subjects to Teachers</div>
          <div>Allot Subjects to Labs</div>
          <div>Check ot the Final Result</div>
          <div></div>
          <div></div>
        </td>
        <td rowspan="16" colspan="12">

          <div>Enter the Time slot Details</div>
          <div>
            <span><input id="add" type="button" value="Add" /></span> <span><input id="edit" type="button" value="Edit" /></span> <span><input id="delete" type="button" value="Delete" /></span>
          </div>
          <table id="timeslotdetails">
            <thead>
              <tr>
                <td colspan="3">Name</td>
                <td colspan="3">Duration</td>
                <td colspan="3">Type</td>
                <td colspan="3">Frequency</td>
              </tr>
            </thead>
            <tbody>

            </tbody>
          </table>
          <div> <button id="slotAllottmentSubmit" type="Submit" value="Submit the Data">Submit the Data</button></div>
        </td>
        <td rowspan="16" colspan="3"></td>
      </tr>
    </table>
  </form>
</body>

这是我的 JavaScript 代码：

$(document).ready(function () {
  $('#timeslotdetails').DataTable();

  $('.option-list #add').click(function () {
    $('#addDialog').css('display:inline');
    $('#addDialog').dialog();
  });
});

我已经按正确的顺序包含了所有依赖文件。

4

1 回答 1

1

我认为 jQuery 选择器$('.option-list #add')是错误的。我检查了一下，在 HTML 中没有看到任何具有.option-list该类的元素。

你可以试试$('#add')。

于 2018-06-18T17:25:01.763 回答