Javascript 元素刷新后的JQuery事件不起作用

提交表单后，我正在执行一个AJAX请求，成功后，它将使用

.load（）

函数“刷新”一个

。问题是这个元素还包含表单，表单必须执行相同的AJAX操作。我可以将

'submit'

事件绑定到所有表单（以及加载的表单）上。但问题是，绑定了事件后，在刷新元素并提交表单之后，什么也不会发生。未刷新的表单工作正常

JQuery：

function formHandler(form) {    //Function, that is getting executed on form submit
    var req_url = form.attr('action') ? form.attr('action') : window.location.href;
    var req_method = form.attr('method') ? form.attr('method').toUpperCase() : 'GET';
    var req_data = new FormData(form[0]);
    req_data.append('token', getCookie('token'));
    $.ajax({    //Doing AJAX request onto PHP script
        type: req_method,
        url: req_url,
        data: req_data,
        contentType: false,
        processData: false,
        cache: false,
        success: function(msg) {    //On success, getting response and parsing it
            var parsed = JSON.parse(msg);
            switch (parsed.error) {
                case 0:
                    var element = '';    //Element that should be updated with .load()
                    if (req_data.get('coupon') != null ||
                        req_data.get('delcoup') != null ||
                        req_data.get('coupval') != null) {
                        element = '#changecpn';
                    } else if (req_data.get('sellfile') != null || req_data.get('newcname') != null ||
                        req_data.get('delitem') != null) {
                        element = '#changeitem';
                    } else if (req_data.get('news') != null ||
                        req_data.get('delnews') != null ||
                        req_data.get('newsval') != null) {
                        element = '#changenews';
                    } else {
                        element = '';
                    }
                    form[0].reset();    //Reset form fields
                    $(element).load(window.location.href + ' ' + element, function() {    //Load the same element from the same page, but with up[dated content
                        $(this).children().unwrap();   //Remove duplicate ID
                    });
                    break;
                case 1:
                    break;
            }
        }
    });
}
$(document).ready(function() {   //On page load
    $(document).on('submit', 'form', function(e) {   //Bind 'submit' event to all forms
        e.preventDefault();
        formHandler($(this));   //Execute form handler
    });
});

HTML元素的示例：

<fieldset id="coupons">
   <legend>Coupons</legend>
   <br>
   <h4 class="zusatz">Add</h4>
   <form action="panelfuncs.php" method="post">   <!-- First form, that won't be updated -->
      <table style="width: 100%;">
         <tbody>
            <tr>
               <td style="text-align: center;"><label for="coupon">Coupon</label></td>
               <td style="width: 40px;"><input type="text" name="coupon" id="coupon" placeholder="Coupon" maxlength="12" required=""></td>
               <td><input type="button" name="gen" id="gen" value="Generate" onclick="randomStr(12)"></td>
            </tr>
            <tr>
               <td style="text-align: center;"><label for="drop">Decrease %</label></td>
               <td><input type="number" name="drop" id="drop" placeholder="Value" min="1" max="50" required=""></td>
            </tr>
         </tbody>
      </table>
      <br>
      <table>
         <tbody>
            <tr>
               <td><input type="submit" value="Add"></td>
               <td><input type="reset" value="Reset"></td>
            </tr>
         </tbody>
      </table>
   </form>

优惠券


添加
息票
减少%

提交此表单后，将添加一张优惠券，它必须显示在下一个表中

   <br>
   <div id="changecpn">   <!-- DIV with tables, that gets updated by .load() -->
      <h4 class="zusatz">Delete</h4>
      <div class="table-wrapper">
         <table style="width: 100%;" class="fl-table">
            <thead>
               <tr>
                  <th>Value</th>
                  <th>Delete</th>
               </tr>
            </thead>
            <tbody>
               <tr style="text-align: center;">
                  <td class="items">Coupon1</td>
                  <form action="panelfuncs.php" method="post">   <!-- Form, that has to work before and after refresh -->
                  <input type="hidden" name="delcoup" value="Coupon1">
                  <td><input type="submit" value="Delete"></td>
                  </form>
               </tr>
            </tbody>
         </table>
      </div>
   </div>
</fieldset>

删除
价值
删除
政变1

---

我不知道问题是什么，使用console.log（）进行调试表明，formHandler函数在刷新和提交后没有被调用，即使在刷新之前它工作正常

您正在将提交处理程序附加到文档就绪状态下的表单，这意味着所有表单都将在页面加载时获得处理程序。我怀疑当您刷新时，您添加了一个新表单（不仅仅是更新现有表单），因此丢失了附加的处理程序。不，它没有更改任何内容。处理程序仍处于附加状态，但在提交表单时不起作用。虽然我发现它可以在微软Edge和IE浏览器（0_o）上运行，但在Chrome和FireFox上不起作用。提神，提神