on('click', ...) не выполняется больше одного раза
 

Всем доброго дня.

Я совсем недавно знаком с языком JS, и, конкретно, библиотекой jQuery, поэтому прошу не закидывать помидорами, а спокойно указать на мои ошибки.

Дело в следующем, есть очень короткий код с вызовом функции и сама функция. Я вызываю обработчик через on('click'...), однако, обработчик срабатывает лишь один раз. В чём причина такого поведения?

$(document).on('ready', function () {
    stickDel();
});

function stickDel(){
    $('.table').each(function(){
        $(this).on('click', '#delete', function(){
            var index = $(this).attr('name');
            var name = $(".table #"+index).text();
            var data = {
		        action: "stick_mat_type_d",
			name: name
            };
            var deleteAjax = $.post(ajaxurl, data, function(response) {
			    if (response==1){
			        deleteAjax.complete(function(){
			            $('.stick_error').empty().css({'background':'#c4f9bb', 'color':'#1f5415'}).append('<p>Данные успешно удалены</p>');
                        $('html, body').animate({scrollTop: 0},500);
                        stickInterval();
                        stickRefresh();
			        });
			    }else{
			        $('.stick_error').empty().append('<p>Произошла ошибка при удалении</p>');
			        $('html, body').animate({scrollTop: 0},500);
			        stickInterval();
			    }
		    });
        });
    });
}

Заранее благодарю!

Без html'я сказать в чем причина сложно.
Есть ли смысл объявлять обработчик "события" «complete» JQ, когда запрос уже завершился успехом (строка 16)?

Тут динамически всё меняется, может в этом проблема? AJAX так же возвращает данные и динамически меняет html

В чистом виде html такой:

<div class="table">
        <table class="stick_mat_types"><tbody>
                <tr class="type_row"><td class="type_name">
                       <div class="type_name_el" id="0">Name 1</div>
                       <div class="type_action"><button class="stick_button" id="delete" name="0">Удалить</button></div>
                       <div class="type_action"><button class="stick_button" id="edit" name="0">Редактировать</button></div>
                </td></tr>
                <tr class="type_row"><td class="type_name">
                       <div class="type_name_el" id="1">Name 2</div>
                       <div class="type_action"><button class="stick_button" id="delete" name="1">Удалить</button></div>
                       <div class="type_action"><button class="stick_button" id="edit" name="1">Редактировать</button></div>
                </td></tr>
         </tbody></table>
</div>

7in, в представленном вами коде изменяется только контент блока ".stick_error" и ничего более.
Вероятно при изменении элементов на странице затираются их обработчики.

В данной функции, да. Мой косяк - не пояснил.

Есть ещё ряд функций, которые изменяют кол-во строк таблицы и обновляют их содержимое AJAX'ом. При этом структура никак не изменяется, т.е. в каждой строке выводится одно и то же Name 1, Name 2,... , Name N. И меняется id, соответственно, в той же прогрессии.

Я не стал выкладывать весь код, т.к. его довольно много.

Есть ещё функция:

function stickEdit(){
    $('.table #edit').each(function(){
        $(this).on('click',  function(){
            var index = $(this).attr('name');
            oldname = $(".table #"+index).text();
            var data = {
			    action: "stick_mat_type_e",
			    name: oldname
		    };
		    var editAjax = $.post(ajaxurl, data, function(response){
		        editAjax.complete(function(){
		            var count = $.parseJSON(response).length;
		            var cats = $.parseJSON(response);
		            if(count>1){
		                $('input:checkbox:checked').prop('checked', false);
		                for(var i=0;i < count;i++){
		                    $('input:checkbox[value="'+cats[i]+'"]').prop('checked', true);
		                    $('#stick_text').val(oldname);
		                    $('html, body').animate({scrollTop: 0},500);
		                    $('#to_complete').empty().text('Изменить');
		                }
		            }else{
		                $('input:checkbox[value="'+cats+'"]').prop('checked', true);
		                $('#stick_text').val(oldname);
		                $('html, body').animate({scrollTop: 0},500);
		                $('#to_complete').empty().text('Изменить');
		            }
		        });
		    });
        });
    });
}

Делает примерно то же самое, обработчик на ней тот же и вызывается прямо рядом с первой. Возможно, она затирает обработчик?

Тогда вопрос такой. Обработчики

$('.table').each(function(){
        $(this).on('click', '#delete',  function(){
        });
});

и

$('.table').each(function(){
        $(this).on('click', '#edit',  function(){
        });
});

это одно и то же, мешают ли они друг другу? Если да, то как выйти из ситуации?

ID должен быть уникальным, нельзя на странице объявить несколько элементов с одним id.

Немного изменил вашу функцию "stickEdit":

function stickEdit(){
    $('.table #edit').on('click',  function(){
		var oldname = $(".table #"+$(this).attr('name')).text();
		
		$.post(ajaxurl, {
			action: "stick_mat_type_e",
			name: oldname
		}, function(response){
			var cats=[];
			try{
				if(typeof response=='string')
					cats=$.parseJSON(response);
			}catch(e){
				cats=[];
			};
			
			if(cats.length>1){
				$('input:checkbox:checked').prop('checked', false);
				$.each(cats,function(i){
					$('input:checkbox[value="'+cats[i]+'"]').prop('checked', true);
				});
			}else
				$('input:checkbox[value="'+cats+'"]').prop('checked', true);
			
			$('#stick_text').val(oldname);
			$('html, body').animate({scrollTop:0},500);
			$('#to_complete').empty().text('Изменить');
		});
    });
}

Nexus, изменил функции, убрал повтор id на странице в виде эксперимента. В итоге stickEdit работает, stickDel нет... Мистика да и только...