CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptwitter-bootstrap-3
coderMe
coderMe

Reputation: 2169

Duplicate modal shown event

Looks like Bootstrap is generating multiple duplicate events when the .modal('show') function is called. I expect that a single 'shown.bs.modal' event will be called, but rather, I get anywhere from 3-7 event logs from my single event handler.

Removing the .fade class from the .modal div fixes this, and the event only triggers once.

HTML:

<div class="modal fade" id="cmsDialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JAVASCRIPT:

$(document).ready(function() {
    $('#cmsDialog').on('shown.bs.modal', function(e) {
        console.log('modal shown!');
    });
    $('.cmsZoneToolbar').find('.cmsZoneEdit').click(function(e){
        openeditscreen();
        return false;
    });

});
openeditscreen = function() {
    $('#cmsDialog').find('.modal-body').html('MODAL CONTENT');
    $('#cmsDialog').modal('show');
}

JS Fiddle (Note that I could only replicate this using jQuery 1.7.1): http://jsfiddle.net/mborn/z0zstu0o/3/

EDIT: Is updating my version of jQuery the ideal solution? There seems to be no other documented cases of this bug - and is it a jQuery bug, or a Bootstrap bug? Or is it a bug at all, am I doing something wrong? (I'm not a Bootstrap guru yet.)

Upvotes: 0

Views: 1705

Answers (1)

Pero P.
Pero P.

Reputation: 26992

Since Bootstrap v3.0.0, the minimum jQuery version is 1.9.0 according to their bower.json

  "dependencies": {
    "jquery": ">= 1.9.0"
  }

You can get to this from the What's included section of their documentation:

http://getbootstrap.com/getting-started/#whats-included

Upvotes: 2

Related Questions