Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.12.2017, 08:57
7in 7in вне форума
Новичок на форуме
Отправить личное сообщение для 7in Посмотреть профиль Найти все сообщения от 7in
 
Регистрация: 25.12.2017
Сообщений: 4

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();
			    }
		    });
        });
    });
}


Заранее благодарю!
Ответить с цитированием
  #2 (permalink)  
Старый 25.12.2017, 10:17
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,723

Без html'я сказать в чем причина сложно.
Есть ли смысл объявлять обработчик "события" «complete» JQ, когда запрос уже завершился успехом (строка 16)?
Ответить с цитированием
  #3 (permalink)  
Старый 25.12.2017, 10:35
7in 7in вне форума
Новичок на форуме
Отправить личное сообщение для 7in Посмотреть профиль Найти все сообщения от 7in
 
Регистрация: 25.12.2017
Сообщений: 4

Сообщение от Nexus Посмотреть сообщение
Без 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>
Ответить с цитированием
  #4 (permalink)  
Старый 25.12.2017, 10:50
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,723

7in, в представленном вами коде изменяется только контент блока ".stick_error" и ничего более.
Вероятно при изменении элементов на странице затираются их обработчики.
Ответить с цитированием
  #5 (permalink)  
Старый 25.12.2017, 11:17
7in 7in вне форума
Новичок на форуме
Отправить личное сообщение для 7in Посмотреть профиль Найти все сообщения от 7in
 
Регистрация: 25.12.2017
Сообщений: 4

Сообщение от Nexus Посмотреть сообщение
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(){
        });
});

это одно и то же, мешают ли они друг другу? Если да, то как выйти из ситуации?
Ответить с цитированием
  #6 (permalink)  
Старый 25.12.2017, 11:40
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,723

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, 25.12.2017 в 11:43.
Ответить с цитированием
  #7 (permalink)  
Старый 25.12.2017, 16:46
7in 7in вне форума
Новичок на форуме
Отправить личное сообщение для 7in Посмотреть профиль Найти все сообщения от 7in
 
Регистрация: 25.12.2017
Сообщений: 4

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как запретить браузеру использовать больше одного соединения на вкладку? Sergey and Общие вопросы Javascript 5 11.01.2017 05:21
gulp.watch повторяет действие многократно, вместо одного раза guava Сборка проекта, утилиты 3 25.10.2015 16:44
onclick срабатывает со 2 раза в ie djonA Общие вопросы Javascript 19 25.03.2013 01:07
почему событие срабатывает более одного раза garisson Элементы интерфейса 3 08.11.2012 05:22
$(document).ready() выполняется два раза syegorius AJAX и COMET 5 16.05.2011 23:17