Кнопка не запускается в форме popover

У меня есть кнопка отмены, которая должна срабатывать, чтобы закрыть мой popover. Но событие click не запускается. Может ли кто-нибудь увидеть, что здесь не так, может быть что-то глупое, потому что я новичок!Кнопка не запускается в форме popover

Нужно ли добавить что-нибудь перед '#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>

источник

2015-04-02 user1186050

Не могли бы вы разместить все необходимые JavaScript? Например. нам нужно будет увидеть, где в первую очередь создается $ calPopOver, и как привязка события щелчка вписывается в большую картинку. –

только что добавил соответствующие js – user1186050

Не могли бы вы добавить остальную часть HTML? Например. В источнике, опубликованном вами, нет #fullcalendar, поэтому его трудно воспроизвести, не догадываясь. –

Измените путь событие щелчка связанно, и вы должны быть в бизнесе:

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

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

источник

2015-04-02 22:44:20

как это иначе, чем просто позвонить .click()? Причина, по которой я спрашиваю, заключается в том, что у меня есть другие события click в этом .js-файле, которые построены с помощью только id, а затем .click, и они, похоже, работают. – user1186050

Не смотря на источник плагина календаря, я бы предположил, что плагин клонирует HTML-код, который вы даете ему в «day-popover-content», что означает, что кнопка отмены, которую вы нажимаете внутри popover в календаре, не является тот же, с которым вы привязались к документу. Чтобы обойти это, привяжитесь к событию кликов документа и дайте ему фильтр для использования при принятии решения о том, следует ли обрабатывать событие. Это общее решение, когда вы имеете дело с динамическими элементами. –

Я согласен с этим. Благодаря! – user1186050

-1

Попробуйте ссылки на селектор и использование remove.

Я не могу увидеть соответствующий код, но что-то вроде этого:

$("#calPopOver").remove;

источник

2015-04-02 22:42:59

Это не '$ ("# calPopOver"). Remove', с которым у меня возникают проблемы, он попадает в событие click. У меня есть точка останова, и она никогда не достигает линии '$ calPopOver.popover (' destroy '); событие #cancelEvent не вызывается. – user1186050

Кнопка не запускается в форме popover

ответ

Смежные вопросы