Ajax提交一个ajax加载表单

Question

I load replies to comments asynchronously in php like in youtube comments. The ajax handler for forms (ie reply forms) loaded like this is not working. e.preventDefault() is not working. The forms are submitted to the action page itself and page is redirected to action url. If i edit a reply. It works but page is redirected to the action url. This happens only for the ajax loaded replies. The same handler is used for regular comments and it works fine.

A comment :

A comment with loaded replies :

When a reply is edited it just goes to /path/to/submit.php and shows the value of json output like this

result on submitting a reply form

Ajax to show or hide replies:

//load or hide replies    
function loadmore(id) {
  var val = $('#' + id).data("value");
  var count = $('#' + id).data("count");
  $.ajax({
    type: 'post',
    url: '/path/to/submit.php',
    data: {
      replyof: val
    },
    success: function(response) {
      var content = document.getElementById("show" + val);
      content.innerHTML = response;
      var clicknum = $('#' + id).data("clicknum");
      $('#' + id).data("clicknum", 2);
      if (!$("#show" + val).is(":hidden") && clicknum != 1) {
        document.getElementById(id).innerHTML =
          ' View all ' + count + ' replies <i class="fas fa-angle-down"></i>';
        $("#show" + val).hide();
      } else {
        document.getElementById(id).innerHTML =
          'Hide all replies <i class="fas fa-angle-up"></i>';
        $('#show' + val).show();
      }
    }
  });
}

I use the same class for comments as well as replies and ajax submit the form to the same page /path/to/submit.php using eg

<form class="replyform" action="/path/to/submit.php">
...
<button type="submit">Delete</button>
...
</form>

The form handler

$(".replyform").submit(function(e) {

  var URL = $(location).attr('href');
  $.ajax({
    async: true,
    type: "POST",
    url: $(this).attr('action'),
    data: $(this).closest('form').serialize(),
    success: function(data) {
      if (data.result === 1) {
        window.location = "/login";
      } else if (data.result === 2) {
        alert('Some error occured.Please try Later');
      } else if (data.result === 3) {
        replyer(data.comment);
        $('body').load(URL);
      } else {
        $('body').load(URL);
      }
    },
    dataType: "json"
  });

  e.preventDefault();
});

Answer 1

The .replyform render by ajax so use on instead of traditional way

$(document).on("submit", ".replyform",function(e) {
  var URL = $(location).attr('href');
  $.ajax({
async: true,
    type: "POST",
    url: $(this).attr('action'),
    data: $(this).closest('form').serialize(),
    success: function(data) {
      if (data.result === 1) {
        window.location = "/login";
      } else if (data.result === 2) {
        alert('Some error occured.Please try Later');
      } else if (data.result === 3) {
        replyer(data.comment);
        $('body').load(URL);
      } else {
        $('body').load(URL);
      }
    },
    dataType: "json"
 });

      e.preventDefault();
});