Post
Ask Question
Suraj Sharma

Suraj Sharma

  • NA
  • 33
  • 633

jQuery click event is not handled

Jun 23 2018 7:43 AM
I am using ASP.NET MVC 4.0 to build my web application and jQuery Dialog plugin for the popup. I intend to put my HTML elements in the div element with id 'addDialog' onto a popup. The popup should be shown on a button click with id 'add' but it's not working. Whenever I click the button nothing happens.
 
This is my View:
 
@{ 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>
 
This is my JavaScript code:
 
$(document).ready(function () { $('#timeslotdetails').DataTable(); $('.option-list #add').click(function () { $('#addDialog').css('display:inline'); $('#addDialog').dialog(); }); });
 
I have included all the dependent files in the right order.

Answers (4)