我的javascript文件不处理jQuery单击事件_Javascript_Jquery_Dialog

我的javascript文件不处理jQuery单击事件

javascript jquery

我的javascript文件不处理jQuery单击事件,javascript,jquery,dialog,Javascript,Jquery,Dialog,我正在使用ASP.NETMVC4.0为弹出窗口构建我的web应用程序和jQuery对话框插件。我打算将id为“addDialog”的div元素中的HTML元素放到弹出窗口中。弹出窗口应该显示在id为“add”的按钮上，但它不起作用。每当我点击按钮，什么都不会发生我的看法是： @{ ViewBag.Title = "TimeSlotDetails"; } <head> <title>TimeSlot</title> <link href="

我正在使用ASP.NETMVC4.0为弹出窗口构建我的web应用程序和jQuery对话框插件。我打算将id为“addDialog”的div元素中的HTML元素放到弹出窗口中。弹出窗口应该显示在id为“add”的按钮上，但它不起作用。每当我点击按钮，什么都不会发生

我的看法是：

@{
  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>

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

我认为jQuery选择器

$（'.option list#add'）

是错误的。我检查了，没有看到HTML中有

.option list

类的元素

您可以尝试

$（'#添加'）

class=“option_list”

$（'.option list#add'）

。我现在直接访问id为“add”的按钮，但它仍然不起作用。我尝试在另一个示例项目中使用dialog插件来测试它，它工作正常，但在我的主要项目中不起作用。我真的需要知道这个问题背后的原因。我刚刚找到了问题的解决方案。我只是把我的点击事件放在document.ready函数的最开始，它就像一个符咒。但我还是不知道原因。我明白了，我用了“选项列表”而不是“选项列表”。我直接访问按钮而不使用它的父元素的类，但它仍然不工作。你能帮我什么吗？我陷入这个问题已经一个多星期了。

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

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