按钮单击不以弹出窗口形式触发

Question

我有一个取消按钮，应该触发它来关闭我的弹出窗口。但是点击事件不会被触发。任何人都可以看到这里有什么问题，可能是愚蠢的，因为我是新手！

我需要在“#cancelEvent”之前添加一些内容吗？前任。一些父元素#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/

按钮单击不以弹出窗口形式触发

Button click not triggering in popover form

javascript

jquery

jquery-click-event

twitter-bootstrap