在父级上使用事件委派的AJAX请求

Question

嘿我正在使用HTML生成一些动态javscript表单并在其上侦听事件我在父元素中使用事件delegation。它的工作原理正常。但现在，当我想提交一份ajax的表格时，我无法摆脱它。

HTML - updateForm是父级

<form id="updateForm" class="py-3" enctype="multipart/form-data">
          <button id="swipe" class="bg-btn hidden-lg-up swipe_btn" style="font-size:1em; float:left;"><i class="fa fa-align-right swipe_btn"></i></button>
            <div class="row" style="clear:both;">
                <div class="col-12 col-lg-6">
                    <img src="https://unsplash.it/100/100" alt="" class="img-fluid">
                    <label for="upload" class="btn-update"><i class="fa fa-camera"></i></label>
                    <input type="file" name="profilePic" class="upload" value="">
                </div>
                <div class="col-12 col-lg-6">
                    <span>Ashish Mehra</span>
                    <b>@</b>
                    <p class="lead"></p>
                </div>
                <div class="col-11 col-md-12 mx-auto">
                    <input type="text" name="fullname" value="Ashish Mehra" class="form-control">

                    <input type="text" name="username" value="" class="form-control">

                    <textarea name="bio" class="form-control" maxlength="120"></textarea>

                    <button type="button" class="bg-btn btn-save" name="button">Save</button>
                </div>
            </div>
        </form>

的Javascript

 swipeForm.addEventListener('click',(e)=>{
  if(e.target.classList.contains('btn-update')) showDialog();
  if(e.target.classList.contains('btn-save'))  swipeForm.submit();
  if(!e.target.classList.contains('swipe_btn')) return;
  e.preventDefault();
  swipeForm.classList.toggle('swipe');
  swipe_panel.classList.toggle('index');
});

因此，当表单上的点击在 btn-save 类的元素上时，我想要触发提交事件，并且也想制作AJAX request。