bootstrap remote modal remove javascript

Question

i have modals in my bootstrap application. the modals get their content from a dataremote source. In this modal I defined some javascript functions.

my problem is, when i close the modal and open it again the javascript code is available twice. That means the on click event will be performed multiple times.

Is there a possibility to clear the modals javascript code on hide?

I also use

$('body').on('hidden', '.modal', function () {
  $(this).removeData('modal');
});

to prevent from showing the same content again

Maybe you used jquery .append so the content is duplicated when reclicked. Could you make a JS Fiddle to understand the situation ? — Maikeximu, Oct 08 '13 at 08:39

score 1 · Answer 1 · answered Oct 09 '13 at 15:12

Here is an example :

markup :

<button type="button" id="test">Launch modal</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog"></div>
</div>

script :

$('#test').click(function() {
    $("#myModal").modal({
        remote : 'your-remote-href'
    });
});
//target this event, see http://getbootstrap.com/javascript/#modals -> events
$('#myModal').on('hidden.bs.modal', function () {
    $(this).empty(); //<---- empty() to clear the modal
})

I assumed you are not using the href-attribute

<button type="button" data-toggle="modal" href="some href" data-target="#myModal">Launch modal</button>

Doing that the modal content is only loaded once. and emptying the modal will be permanent.

bootstrap remote modal remove javascript

1 Answers1