Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 28.09.2017, 07:11   #1
Parallelogram
Недотепа
Форумчанин
 
Регистрация: 18.01.2011
Сообщений: 174
По умолчанию [РЕШЕНО] Применить функцию к новым элементам

Здравствуйте.
Есть готовый модуль сортировки строк (менять местами строки путем перетаскивания), который мне более чем подходит, но он не применяется к вновь добавленным элементам (после загрузки DOM).

Подскажите, как исправить?

Ссылка на jsfiddle
Код:
<div id="container">
	<div class="drag" data-co="1" id="1qw">1</div>
	<div class="drag" data-co="2" id="2as">2</div>
	<div class="drag" data-co="3" id="3zx">3</div>
</div><button>click</button>
Код:
$.fn.draggable = function(){
	function disableSelection(){
	if (window.getSelection) {window.getSelection().removeAllRanges()} else {document.selection.empty()}
	return false;
	}
    $(this).mousedown(function(e){
		var drag = $(this);
		var posParentTop = drag.parent().offset().top;
		var posParentBottom = posParentTop + drag.parent().height();
		var posOld = drag.offset().top;
		var posOldCorrection = e.pageY - posOld;
        drag.addClass('dragActive');
        drag.parent().addClass('ccc');
		var mouseMove = function(e){
			if (e.which==1) {
				var posNew = e.pageY - posOldCorrection;
				if (posNew < posParentTop){
					if (drag.prev().length > 0 ) {
						drag.insertBefore(drag.prev().css({'top':-drag.height()}).animate({'top':0}, 100));
					}
					drag.offset({'top': posParentTop});
 	           } else if (posNew + drag.height() > posParentBottom){
					if (drag.next().length > 0 ) {
						drag.insertAfter(drag.next().css({'top':drag.height()}).animate({'top':0}, 100));
 	               }
					drag.offset({'top': posParentBottom - drag.height()});
 	           } else {
					drag.offset({'top': posNew});
					if (posOld - posNew > drag.height() - 1){
						drag.insertBefore(drag.prev().css({'top':-drag.height()}).animate({'top':0}, 100));
						drag.css({'top':0});
						posOld = drag.offset().top;
						posOldCorrection = e.pageY - posOld;
					} else if (posNew - posOld > drag.height() - 1){
						drag.insertAfter(drag.next().css({'top':drag.height()}).animate({'top':0}, 100));
						drag.css({'top':0});
						posOld = drag.offset().top;
						posOldCorrection = e.pageY - posOld;
					}
				}
			} else {
				mouseUp();
			}
		};
		var mouseUp = function(){
			$(document).off('mousemove', mouseMove).off('mouseup', mouseUp);
			$(document).off('mousedown', disableSelection);
            drag.animate({'top':0}, 100, function(){
              drag.parent().removeClass('ccc');
              drag.removeClass('dragActive');
              $('.drag').each(function (index) {
                  console.log($(this).data('co') + ' - ' + $(this).attr('id') + " | " + ++index);
              });
	        });
        };
		$(document).on('mousemove', mouseMove).on('mouseup', mouseUp).on('contextmenu', mouseUp);
		$(document).on('mousedown', disableSelection);
        $(window).on('blur', mouseUp);
    });
}

$('.drag').draggable();



var tt = 3;
$("button").click(function() {
	console.log("click");
  $("#container").append('<div class="drag" data-co="'+ ++tt+'" id="'+tt+'cc">'+tt+'</div>');
});
Решение:
Цитата:
вместо:
Цитата:
Код:
 $(this).mousedown(function(e){
пробуйте:
Код:
    $("#container").on("mousedown", '.drag', function(e){

Последний раз редактировалось Вадим Мошев; 11.05.2018 в 18:51.
Parallelogram вне форума Ответить с цитированием
Старый 28.09.2017, 07:58   #2
ADSoft
Старожил
 
Регистрация: 25.02.2007
Сообщений: 4,150
По умолчанию

Код:
 $(this).mousedown(function(e){
заменить
на
Код:
$(this).on("mousedown",(function(e){
не поможет?
ADSoft вне форума Ответить с цитированием
Старый 28.09.2017, 08:16   #3
Parallelogram
Недотепа
Форумчанин
 
Регистрация: 18.01.2011
Сообщений: 174
По умолчанию

Нет, это не работает. Это было мое первое предположение.
Parallelogram вне форума Ответить с цитированием
Старый 28.09.2017, 09:36   #4
ADSoft
Старожил
 
Регистрация: 25.02.2007
Сообщений: 4,150
По умолчанию

тогда вот эту вещь надо как то в on навесить $('.drag').draggable();
но так как это функция .. .синтаксис чет не знаю
ADSoft вне форума Ответить с цитированием
Старый 28.09.2017, 09:38   #5
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

вместо:
Цитата:
Код:
 $(this).mousedown(function(e){
пробуйте:
Код:
    $("#container").on("mousedown", '.drag', function(e){
Serge_Bliznykov вне форума Ответить с цитированием
Старый 28.09.2017, 09:49   #6
Parallelogram
Недотепа
Форумчанин
 
Регистрация: 18.01.2011
Сообщений: 174
По умолчанию

Цитата:
Сообщение от Serge_Bliznykov Посмотреть сообщение
$("#container").on("mousedown", '.drag', function(e){
Действительно. Спасибо)
Parallelogram вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как применить свою функцию к селектору ? L6go1as JavaScript, Ajax 3 25.09.2015 11:12
Можно ли применить функцию format в таком случае? XE5 Общие вопросы Delphi 14 01.05.2014 03:20
Как применить функцию Predator199 PHP 6 05.08.2012 23:58
к элементам первой половины массива добавить минимум, а к элементам второй - добавить максимум specialist Паскаль, Turbo Pascal, PascalABC.NET 3 08.05.2011 01:46
C НОВЫМ ГОДОМ merax Свободное общение 197 14.01.2010 15:01