JQuery событие после элемента refre sh не работает - PullRequest
0 голосов
/ 08 марта 2020

После отправки форм я делаю запрос AJAX, после успеха он "обновляет" <div> с помощью функции .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>

Я не знаю, в чем проблема, отладка с console.log () показала, что функция formHandler не вызывается после refre sh и отправка, хотя до refre sh работает нормально

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...