fullcalendar remove event by popup modal strange behavior

Question

I have made fullcalendar event remove popup modal. This is partly working but there are strange behavior. I am newbie to this, so I have tried several different way but I can't make the stange behavior away. and I don't know how to make jsfiddle to reproduce the exact behavior without copying all my code. but my code contains a lot extra things. so I can't provide jsfiddle. and only the related code is stated here. but I think Someone who has good experience about this. I think they can easily see through the code. I am really appreciated for advice. I have spent too much time on it. The strange behavior is that event remove by popup modal, it removes the other event which previously closed by close button. In the following explanation contains the details.

I have made like this:

1) div code for popup modal

<div class="modal fade" id="modalRemove" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
       <h4>Are you sure to remove the event?</h4>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="close" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-danger" id="removeBtn" data-dismiss="modal">Remove</button>
      </div>
    </div>
  </div>
</div>

2) when an event is clicked -> popup modal displays -> then can choose (click) close button or remove button on popup modal

eventRender: function (event, element){  
    element.click(function() {
        $('#modalRemove').modal();
        $('#eventTitle').html(event.title);
        $("#removeBtn").click(function() {  
             $('#calendar').fullCalendar('removeEvents',event._id); 
        });
    });
},

What is working

1. Popup modal is working
2. close button, remove button is working
3. event is removed when remove button is pressed on the popup modal

what is strange behavior

1. let's say there are two events: test1, test2 (image1)

2. I clicked test1 event, then popup modal appears (image2)

3. then, I click close button on popup for test1 (Not remove)-> Popup is disappeared -> test1 event is still on fullcalendar as it should be. ====> until here works fine

4. then, I click test2 event-> popup modal appear like image 2 -> press remove button for test2 -> [problem]then both test1, test2 events are removed

why it removes both events after 1,2,3,4 steps?

Answer 1

Try this:

eventRender: function(event, element) {
  element.attr('href', 'javascript:void(0);');
  element.click(function() {
    //set the modal values and open
    $('#eventTitle').html(event.title);

    // Rebind the Remove button click handler
    $("#removeBtn").off('click').on('click', function(e) {
        $('#calendar').fullCalendar('removeEvents', event._id);
    });

    $('#modalRemove').modal();
  });
}

Note how all the click events are unbound from the #removeBtn button via off() prior to binding for the specific event.

(In your code every time you clicked an event in the calendar a new click handler for this event was bound to #removeBtn . Thus when you finally clicked "Remove" multiple handlers were executed.)

Answer 2

你可以这样做

$(".popover").hide();