Tengo una página en la que tengo un div. El contenido de ese div está siendo poblado por una página de inclusión, y esa página de inclusión está haciendo una llamada a una base de datos para recuperar contenido.

Cuando un usuario hace clic en el botón 'Agregar tarea', se realiza una llamada ajax para insertar contenido en una base de datos y el div que muestra todas las tareas se actualiza con .load (). El mismo proceso ocurre para 'eliminar tarea'; Se realiza otra llamada ajax que elimina una fila de una base de datos y el div se actualiza usando .load ().

Estoy viendo las inserciones y eliminaciones en la tabla de mi base de datos, pero el front-end es un poco inestable. Cuando la página se carga por primera vez, puedo realizar un número ilimitado de acciones de 'agregar' y todas las nuevas tareas aparecen en el div. Sin embargo, solo puedo hacer una acción 'borrar'; después del primer intento, parece que no puedo seleccionar un elemento del div.

Aquí está el código 'agregar':

$("#accept_new_task").click(function(){
    jQuery.ajaxSetup({async: false});

    //Make ajax call
    $.post("[url]", { [data] },

        //If successful, add a new item to task list and clear input
        function(data) {

            //Clear input
            $("#new_task_name").val('');
            $("#new_task_description").val('');

            //Show new task
            $('#newly_added_tasks').load('[page on server]', function() {
            });             



        });

    jQuery.ajaxSetup({async: true});    
});

Y el código 'eliminar':

//Deletes recently added task
$(".newtask").click(function(){
    alert('!');  //to test
    var val = $(this).attr('value');

    jQuery.ajaxSetup({async: false});

    //Make ajax call
    $.post("[url]", { [data] },

        //If successful, refresh div 
        function(data) {
            $('#newly_added_tasks').load('[page on server]', function() {
                alert('Load was performed.');
            });                             
        });     

    jQuery.ajaxSetup({async: true});  

});

El contenido que se está cargando es una tabla generada con contenido extraído de una llamada a la base de datos. Aquí hay un fragmento:

<td>'.$task[$i]['name'].'</td>
<td>'.$task[$i]['description'].'</td>
<td><input type="button" class="newtask" name="accept_new_task" id="task_'.$task[$i]['task_id'].'" value="'.$task[$i]['task_id'].'"></td>

Cualquier ayuda sería apreciada