Button click not triggering in popover form

Question

I have a cancel button that should get triggered to close my popover. But the click event doesn't get triggered. Can anyone see what is wrong here, might be something stupid because I'm a newbie!

Do I need to add something before '#cancelEvent'? ex. someparentelement#cancelEvent

The line above the cancel button submits the form, so that works, the cancel button just doesn't work..

 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

Change the way the click event is bound and you should be in business:

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

Demo: http://jsfiddle.net/BenjaminRay/m6kpjj5g/

Answer 2

Try referencing the selector and use remove .

I can't see the relevant code, but something like this:

$("#calPopOver").remove;