jQuery在模式框中对服务器的多个请求

Question

I have a problem and don't know how to solve it.

HTML Write Message

<a href="javascript:void(0);" data-name="Test1 (Expert)" data-to="2" class="btn btn-default btn-sm message"><i class="fa fa-envelope"></i> Write Message</a>

<!--Modal-->
<div class="modal fade" id="msg_modal" tabindex="-1" role="dialog" aria-labelledby="msg_modal">
...
   <a href="javascript:void(0);" class="btn btn-success pull-right send_msg"><i class="fa fa-plus"></i> Send Message</a>
</div>

JS

$('.message').on('click', function(e){
   $('#msg_modal').modal('show').on('shown.bs.modal', function(e) {
     $.ajax({
       ...
     });
   });
});

My problem: When I click on .message selector - ajax loads data one time; When I close dialog window and click again on .message selector - ajax loads multiple time. How can I solve this? Thanks.

Answer 1

Seems like every time you click the button, it will register new listener again and again. Try separating .modal('show') with event shown.bs.modal like so :

$('.message').on('click', function(e){
  $('#msg_modal').modal('show');
});

$('#msg_modal').on('shown.bs.modal', function(e) {
   $.ajax({
    ...
  });
});

You only need to register the shown.bs.modal listener once as shown.bs.modal listener will trigger automatically when .modal('show') called.