Ajax form functions stop working after using

I send data to a php script using a form, and I get a response, if the answer is correct – one action, if not – another.
When I click on the nextphoto button, the form on Ajax stops working. Stupidly opens php with the result of the answer. What could be wrong?

UPD:
And here’s another question, I made it so that if the answer is correct, the submit button is removed.

result = ',   :)'; $("#otp").hide('slow');

But now when you click nextPhoto, the button is still removed. Although there was no answer yet.


Answer 1

function ajax_submit(){
    var str = $("#PhotoForm").serialize();
    $.ajax(
    {
          type: "POST",
          url: "/guess_the_group/guess_group.php",
          data: str,
          success: function (msg)
          {
             $("#note").ajaxComplete(function (event, request, settings)
          {
             if (msg == 'OK') //   ,  
                 {
                     result = '<div id="notification_ok">,  :)</div>';
                 } else {
                     result = msg;
                 }
                 $(this).html(result);
          });
         }
    });
}

Answer 2

Two solutions:

  1. return false; must be returned not in the ajax callback, but in the submit
  2. callback

  3. Do not submit the form button, but a button and handle it with a click event