按鈕單擊不在觸發器形式中觸發

Question

我有一個取消按鈕，應該觸發以關閉我的彈出窗口。但是點擊事件不會被觸發。任何人都可以看到這裏出了什麼問題，可能會因爲我是新手而變得愚蠢！

我需要在'#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

更改click事件綁定的方式，你應該在業務：

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

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

Answer 2

嘗試引用的選擇和使用remove。

我沒有看到相關的代碼，但這樣的事情：

$("#calPopOver").remove;