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

我有一个问题，不知道如何解决。

的HTML
    
     写信息

<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({
       ...
     });
   });
});

我的问题：当我点击.message选择器时-ajax加载数据一次；当我关闭对话框窗口并再次单击.message选择器时，ajax会加载多个时间。
我该如何解决？谢谢。

最佳答案

好像每次单击按钮一样，它将一次又一次注册新的侦听器。尝试将.modal('show')与事件shown.bs.modal分开，如下所示：

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

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

您只需注册一次shown.bs.modal侦听器，因为shown.bs.modal侦听器将在调用.modal('show')时自动触发。