Problem sending form to PHP with AJAX

Good, I'm starting with some of this so you may see a lot of mistakes, if you'd like to comment, I'd appreciate it, let's start ...

• THE IDEA:

Create, show, mark as done or delete something that we will call tasks in a "database" without reloading the page and displaying notifications.

When we create a task, we have to reload the div that shows the existing tasks to include this new one.

When we mark as done or we eliminate a task, we have to hide the div of it.

• THE PROBLEM:

Everything works correctly less when we create a new task which causes ajax.js to reload the div $('#resultnotas2').load('mistareas.php'); if after this I try to mark it as done or delete a task (this is done from the div that was reloaded by ajax.js ) takes me to the file accion.php , it's as if ajax.js could not intercept the submit event .

If we mark as done or delete a task while loaded with <?php include"mistareas.php";?> ajax.js it works correctly.

• THE ARCHIVES:

• index.php

The content of this file should be the only one to be shown at all times.

From here we can create a new task.

Show <?php include"mistareas.php";?> the tasks previously created, gives us the option to mark them as done or eliminate them.

In head:

<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>

In body:

<div id="resulttareas">
    <div id="titulotareas"><span>Mis Tareas</span></div>
    <div id="resulttareas1">
        <form id="nota" method="post" action="accion.php" name="nota" onsubmit="return validacionfecha()">
            <textarea id="minota" name="minota" placeholder="Crear nueva tarea..." required></textarea>
            <input type="image" src="images/save-32.png">
            <input id="fechanota" type="text" name="hacernota" size="7" maxlength="8" placeholder="DD/MM/AA" autocomplete="off"> 
        </form>

        <div id="resulttareas2"> <!-- Div que se recarga -->
            <?php include"mistareas.php";?>
        </div>
    </div>
</div>

<div id="resultnotify" style="display:none"></div> <!-- Div que muestra notificación -->

• mistareas.php

This file consults the "database" and returns the tasks stored there.

Here is the option to mark them as done or delete them.

echo '
<div id="item'.$datos[0].'">
    <p>'.$datos[1].'</p>
    <hr/>
    <p>Tarea creada el: '.$fechayhoranota.'
        <form id="oknote" method="post" action="accion.php" name="oknote">
            <input type="hidden" value="'.$datos[0].'" name="oknote">
            <input type="image" width="16px" src="images/like.png" onclick="javascript:oculta(\'item'.$datos[0].'\')">
        </form>
        <form id="delnote" method="post" action="accion.php" name="delnote">
            <input type="hidden" value="'.$datos[0].'" name="delnote">
            <input type="image" width="16px" src="images/delete.png" onclick="javascript:oculta(\'item'.$datos[0].'\')">
        </form>
    </p>
</div>
';

• ajax.js

Send the data of the requests to accion.php

// CREAR NUEVA TAREA
$(document).ready(function() {
   // Interceptamos el evento submit
    $('#form, #fat, #nota').submit(function() {
        $('#resultnotify').fadeOut('fast'); // Ocultamos div notificación
  // Enviamos el formulario usando AJAX
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            // Mostramos un mensaje con la respuesta de PHP
            success: function(data) {
                $('#resultnotify').slideDown('fast'); // Mostramos div notificación
                $('#resultnotify').html(data); // Mostramos respuesta notificación
                $('#nota')[0].reset(); // Limpiamos el formulario
                $('#resultnotas2').load('mistareas.php'); // Recargamos div con tareas
                setTimeout(function() {
                    $('#resultnotify').fadeOut(1500);
                }, 5000); // Ocultamos div notificación
            }
        })        
        return false;
    }); 
})

// MARCAR COMO HECHA O ELIMINAR TAREA
$(document).ready(function() {
       // Interceptamos el evento submit
        $('#form, #fat, #oknote, #delnote').submit(function() {
            $('#resultnotify').fadeOut('fast'); // Ocultamos div notificación
      // Enviamos el formulario usando AJAX
            $.ajax({
                type: 'POST',
                url: $(this).attr('action'),
                data: $(this).serialize(),
                // Mostramos un mensaje con la respuesta de PHP
                success: function(data) {
                    $('#resultnotify').slideDown('fast'); // Mostramos div notificación
                    $('#resultnotify').html(data); // Mostramos respuesta notificación
                    setTimeout(function() {
                        $('#resultnotify').fadeOut(1500); 
                    }, 5000); // Ocultamos div notificación
                }
            })        
            return false;
        }); 
    })

// OCULTAR DIV DE TAREA HECHA O ELIMINADA
function oculta(elemento) {
    item=$("#"+elemento);
        $(item).removeClass('visible');
        $(item).addClass('invisible');
        $(item).slideUp('fast');
}

• accion.php

Process the data and return a result.

Here they are created, marked as done or eliminated tasks.

echo '
    <div class="resultnotifyimg">
        <img src="images/like.png" width="80px">
    </div>
    <div id="resultnotifytxt" class="resultnotifytxt">'.$result.'</div>
    ';