按鈕單擊不會觸發彈出窗口形式

Question

我有一個取消按鈕，應該觸發該按鈕才能關閉我的彈出窗口。 但是click事件不會被觸發。 誰能看到這里有問題，可能是因為我是新手而變得很愚蠢！

我需要在“ #cancelEvent”之前添加一些內容嗎？ 恩。 someparentelement＃cancelEvent

“取消”按鈕上方的行提交了表單，因此可以使用，“取消”按鈕不起作用。

 var $calPopOver; $(document).ready(function (of) { $("#overview").hide(); $("#details").hide(); $("#listing").hide(); $("#address").hide(); $("#map").hide(); $("#images").hide(); $("#eventcalendar").show(); $('#fullcalendar').fullCalendar({ header: { left: 'prev,next', //today', center: 'title', //right: 'month,agendaWeek,agendaDay' right: '' }, defaultView: 'month', editable: true, allDaySlot: false, selectable: true, slotMinutes: 15, //eventLimit: 1, //eventLimit: true, // for all non-agenda views //views: { // agenda: { // eventLimit: 2 // adjust to 6 only for agendaWeek/agendaDay // } //}, events: '/ManageSpaces/GetDiaryEvents/', //eventLimitClick: function (cellInfo, jsEvent) { //}, eventClick: function (calEvent, jsEvent, view) { //function (data, event, view) { //var s = cellInfo.segs; $("#eventDetails.collapse").collapse('toggle'); if ($calPopOver) $calPopOver.popover('destroy'); }, dayClick: function (data, event, view) { $(this).popover({ html: true, placement: 'bottom', container: 'body', title: function () { return $("#day-popover-head").html(); }, content: function () { return $("#day-popover-content").html(); } }); //$(this).popover('toggle'); if ($calPopOver) { $calPopOver.popover('destroy'); } $calPopOver = $(this).popover('show'); } }); }); $("#cancelEvent").click(function () { $calPopOver.popover('destroy'); }); 

 <div id="eventcalendar"> <div class="col-md-10"> <div id='fullcalendar' style="width:100%"></div> <div id="day-popover-head" class="hide">Add Event</div> <div id="day-popover-content" class="hide"> @*<form role="form">*@ <div class="form-group"> <label for="title">Title:</label> <input type="text" class="form-control" id="title"> </div> <div class="form-group"> <label for="timeSelect">Select time:</label> <select class="form-control" id="timeSelect"> </select> <br> <label for="timeDuration">Select duration:</label> <select class="form-control" id="timeDuration"> <option value="30">30 min</option> <option value="45">45 min</option> <option value="60">60 min</option> <option value="75">75 min</option> <option value="90">90 min</option> <option value="105">105 min</option> <option value="120">120 min</option> </select> </div> <div class="form-inline"> <button type="submit" class="btn btn-default">Submit</button> <button type="button" id="cancelEvent" class="btn btn-default">Cancel</button> </div> @*</form>*@ </div> </div> <div id="eventDetails" class="col-md-2 collapse" style="background-color:yellow;"> hello </div> </div> 

Answer 1

更改單擊事件的綁定方式，您應該可以開展業務：

$(document).on('click', '#cancelEvent', function () {
    alert('Doing cancel...');
    $calPopOver.popover('destroy');
});

演示： http : //jsfiddle.net/BenjaminRay/m6kpjj5g/

Answer 2

嘗試引用選擇器，然后使用remove 。

我看不到相關的代碼，但是像這樣：

$("#calPopOver").remove;