Javascript jquery自动双击

这是我的代码，当我点击loadmore按钮时，它会自动双击

这是我的html

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mygallery">
                Launch demo modal
              </button>

              <!-- Modal -->
              <div class="modal" id="mygallery" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-xl" role="document">
                  <div class="modal-content" style="width: fit-content;">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body datafromdb col-md-12" id="imagesfromdb">    
                      <div class="row image-grid">

                      </div>
                      <button class="loadmore" data-id="2">Load More</button>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div>

启动演示模式
情态标题
&时代；
加载更多
接近
保存更改

这是我的javascript

$(document).on('show.bs.modal','#mygallery', function () {
  var section = $('.image-grid');
  section.html('loading...');
  var page = '1';
  $.post('<?php echo base_url('Admin/getImagesApi') ?>', {
    page:page,
    check:1,
  },function (e) {
    if (e.status == 'success') {

      if (e.html !== '') {
        $('.image-grid').html(e.html);
        var btn = $(".loadmore");
        btn.show();
        btn.data("id",e.nextpage);
        btn.removeAttr('disabled');
        console.log('ok');
        btn.on('click', function () {
          btn.html('click');
          console.log(btn);

        });
      }else{
      }
      
    }else{
      section.html('End');
    }
  });
});

$（document）.on（'show.bs.modal'，'mygallery'，函数（）{
var section=$（'.image grid'）；
html（'loading…'）；
变量页='1'；
$.post（“”{
第页：第页，
支票：1，
}，功能（e）{
如果（如状态=‘成功’）{
如果（e.html！=''）{
$（'.image grid'）.html（e.html）；
var btn=$（“.loadmore”）；
btn.show（）；
btn.数据（“id”，即下一页）；
btn.removeAttr（“禁用”）；
console.log（'ok'）；
btn.on（'单击'，函数（）{
html（'click'）；
控制台日志（btn）；
});
}否则{
}
}否则{
第.html节（“结束”）；
}
});
});

我只想在我关闭它时取消此事件 或者每次我调用modal时只需单击一下 如果有人发现了错误，请马上告诉我

---

谢谢

此代码的问题在于每次发生

show.bs.modal

事件时，

btn.on（…）

处理程序都会再次添加。因此，双击，然后三次单击，依此类推。

btn.on（…）

处理程序只应在处理AJAX完成的代码之外添加一次。您可以修复我的代码吗