jQuery плагин А не видит динамически-добавленные данные плагином Б

Bebek · 7 Ноя 2012

Привет!

У меня аплоадер изображений на jquery + ajax. Как аплоадер загрузил фотку, успешно её загрузил, то динамически выводит на страницу юзера скриншот загруженной фотографии.

Я нашел в интернете обычный плагин на jquery tip (подсказки), его действие простое. Когда наводишь на элемент, он выводит доп.данные которые были записаны в тег того элемента.

То есть получается так:

PHP:

<span id="dopoltinelniy tekst" class="tip">navedi na menya i poluchi dop.tekst</span>

Когда я статично просто на HTML странице это делаю, то подсказка отображается, а когда вывожу динамически через скрипт данные, то плагин не видит что в классе зайдетвован TIP и что нужно отобразить то что в ID.

P.S. Я знаю что необходимо было добавлять данные в data-VALUE=""... Но это не суть. Сути это не меняет. ПОтому что я пробовал с 4 разными плагинами которые выводят подсказки.. Ни один из них не "видит" динамически загруженные мои данные...

Вот кусок кода АПЛОАДЕРА... Когда загрузка прошла успешна:

PHP:

onComplete: function(file, response){
jQuery('<li data-itemid="'+response+'" class="'+response+'"></li>').appendTo('#uploadfiles').html('<span id="/image/small/'+response+'" class="screenshot"><img src="/image/little/'+response+'" alt="'+response+'" /></span><br><span class="deletefile" onclick=Delete("'+response+'")>Удалить</span><br><font class="movefile">Двигать</font>').addClass('uploadsuccess');
}

Bebek · 7 Ноя 2012

я не силен в jquery... только начал программировать... может какая нибудь связь должна быть, чтобы связать динамические данные для использования в другом jquery плагине?

С. · 7 Ноя 2012

Bebek написал(а):
Я знаю что необходимо было добавлять данные в data-VALUE=""... Но это не суть.

Нет это суть! Если ни один из этих двух плагинов, ни какой нибудь третий плагин и даже дух святой эти данные туда не добавил, то с какой стати они вдруг должну отобртазиться? Их там нет! На сервере есть, а на странице нет.

Bebek · 7 Ноя 2012

С. написал(а):
Нет это суть! Если ни один из этих двух плагинов, ни какой нибудь третий плагин и даже дух святой эти данные туда не добавил, то с какой стати они вдруг должну отобртазиться? Их там нет! На сервере есть, а на странице нет.

суть в том что по отдельности эти скрипты работают, и данные добавляю в любые поля либо в класс, либо в ID, либо в DATA-VALUE... Без разницы.... Всё по отдельности работает, а когда вывожу динамически данные (опять же этти данные могу передать различных полям) , то плагин подсказки не работает, он просто напросто не запускается, потому что не видит новые записи

С. · 7 Ноя 2012

Подсказка выводится из id? Фейерично!

Но как бы там не было, можно еще раз привести отдельно только тот динамически добавляемый тег, от которого ожидается появление подсказки?

Bebek · 7 Ноя 2012

Плагин tip.js

PHP:

this.screenshotPreview = function(){
	xOffset = 10;
	yOffset = 30;
	jQuery(".screenshot").hover(function(e){
		jQuery("body").append("<p id='screenshot'><img src='"+ this.id +"' alt='"+ this.id +"' style='width: 225px; heigth: 150px;' /></p>");
		jQuery("#screenshot")
		.css("top",(e.pageY - xOffset) + "px")
		.css("left",(e.pageX + yOffset) + "px")
		.fadeIn("fast");
	},
	function(){
		jQuery("#screenshot").remove();
	}); 
	jQuery(".screenshot").mousemove(function(e){
		jQuery("#screenshot")
		.css("top",(e.pageY - xOffset) + "px")
		.css("left",(e.pageX + yOffset) + "px");
	});
};

ТО есть у любого тега вбиваю в CLASS=СКРИНШОТ а в ID="путь к картинке", то при наведении появляется просмотр фотки....

Статично он работает, то есть если я эти данные вел в HTML и смотрю в браузере...

Но, когда я загружаю фотографию посредством аплоадера и публикую на страницу динамично загруженную фотографию в виде маленькой превьюшки, то при наведении просмотр фотографии нет, плагин подсказки вообще не видит запуск.. от чего даже не реагирует, будь даже поле ID пустое - при статичной проверке, подсказка выходит, но без фотографии, а после динамически выгруженной на старницу информации - плагин подсказко даже не реагирует

WMix · 7 Ноя 2012

если я понял проблему то

PHP:

jQuery(".screenshot").live('hover', function(e){ // не уверен на счет hover яб написал mouseover или чтот в этом роде но подсказка это метод live
jQuery(".screenshot").live('mousemove', function(e){ // как и тут

и в id бычно не пишут путь к картинке, придумай лучше любой аттрибут и пиши туда!
пусть даже это не валидно в html4
к примеру <div class="screenshot" src="/img/small/preview.png">наведи на меня</div>
id индефицирует элемент и очень важно он уникален на страничку

Bebek · 7 Ноя 2012

WMix, я придумал например атрибут data-img... но скрипт не выводит оттуда данные, АНДИФИРЕТ пишет...

а на счет этих:
//jQuery(".screenshot").live('hover', function(e){
//jQuery(".screenshot").live('hover', function(e){

то с ними подсказка не работает даже в статичном варианте!((

WMix · 7 Ноя 2012

то с ними подсказка не работает даже в статичном варианте!((

// не уверен на счет hover яб написал mouseover или чтот в этом роде но подсказка это метод live

WMix, я придумал например атрибут data-img... но скрипт не выводит оттуда данные, АНДИФИРЕТ пишет...

jQuery.data

Redjik · 7 Ноя 2012

WMix написал(а):
но подсказка это метод live

он еще с 1.7 деприкейтед, альтернативы delegate или on

WMix · 7 Ноя 2012

хм... данке!

Bebek · 7 Ноя 2012

блин! мои познания в программировании jquery еще слишком малы, чтобы понимать что вы написали! но всё равно БОЛЬШОЕ СПАСИБО

WMix · 8 Ноя 2012

на самом деле все просто, я еще не разбирался внимательно с "on" привычка.. но идея такая, если написать

PHP:

jQuery(".screenshot").mousemove(function(e){});

то скрипт пробежится один раз по структуре документа и подвесит событие mousemove для .screenshot
поэтому познее динамически созданные элементы документа неработают...
отсюда 2 пути,
либо при добавлении элемента тутже подвешивать event либо заставить это делать jquery с помощью live или как сказал Redjik с помощью on

"деприкейтед == deprecated == устарела"

далее "hover" такого события я не знаю, яб написал "mouseover"

jQuery.data('#id','src', '/img/small/preview.png'); запомнит в указанном элементе src
jQuery.data('#id','src'); вернет src указанного элемента

Bebek · 13 Ноя 2012

WMix, СПАСИБО БОЛЬШОЕ!!!!! твой совет по направлению очень помог мне!.... оказывается есть действия которые выполняются условно говоря в РЕАЛЬНОМ ВРЕМЕНИ (как ты сказал LIVE) и есть которые статичные - ТУПО ПРИ ЗАГРУЗКЕ СТРАНИЦЫ ПРОСТАВЛЯЕТ СОБЫТИЯ и при подгрузке новых динамичных данных он просто не реагирует.... Я ПРОСТО ЭТО НЕ ЗНАЛ и поэтому были трудности)))

Еще один вопрос:
В этом же аплоадере изображений есть функция удаления фото. То есть при загрузке изображений выходит следующие данные:
[ФОТО] (вывод скриншота фотографии)
[просмотр] (при наведении он открывает фотку большого размера)
[удалить] (при нажатии он сразу удаляет фотографию и также не перезагружая страницу он удаляет данный блок)

на одном сайте я видел такое: когда нажимаешь на УДАЛИТЬ, вместо слово УДАЛИТЬ появляется слово УВЕРЕНЫ? и вот если его нажать то фотка удаляется, а если в течении 10 сек на него не нажимать или нажать на другую пустую область, то УВЕРЕНЫ? обратно превращается в УДАЛИТЬ.

Подскажи пожалуйста или направь))

WMix · 13 Ноя 2012

тебя интересуют html из jQuery и setTimeout от javascript

Bebek · 14 Ноя 2012

WMix, [спасибо большое!

Вот что получилось:

PHP:

<!-- ПОДКЛЮЧАЕМ JQUERY -->
<script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
<script type="text/javascript">
	jQuery.noConflict();
</script>


<script>
jQuery(document).ready(function(){
	<!-- при нажатии DIV'а кликми -->
	jQuery("#clickme").click(function () {
		<!-- добавляем запись о подтверждении -->
		jQuery("#delete").html("<span style='color: red;'><b>Уверены?</b></span>");
		<!-- удаляем запись об удалении -->
		jQuery("#clickme").remove();

		<!-- если подтверждения не было, то обратно удаляем подтверждение и выводим вопрос УДАЛИТЬ -->
		setTimeout(function(){
			jQuery("#deletebox").html("<div id='clickme'>Удалить?</div>");
			jQuery("#delete").remove();
		}, 5000)

	});
});
</script>

<!-- Если не нажато ПОТДВЕРЖДЕНИЕ ОБ УДАЛЕНИЕ, то в этом DIV'е обратно появится вопрос УДАЛИТЬ? -->
<div id="deletebox">
	<div id="clickme">Удалить?</div>
</div>

<!-- DIV куда будет выводится инфо о ПОТДВЕРЖДЕНИИ УДАЛЕНИЯ -->
<div id="delete"></div>

У меня опять та же проблема....

ВОПРОСЫ:
1. Почему когда нажимаю на "УДАЛИТЬ" выходит подтверждение "УВЕРЕНЫ?" если не нажать в течении 5 сек, то оно опять превращается в "УДАЛИТЬ" - всё правильно, но почему уже клик не реагирует? Опять нужно использовать LIVE? Помоги с этим плз.

2. Допустим я нажал на УДАЛИТЬ, а потом и на подтверждение УВЕРЕНЫ тоже нажал, картинку удалилась вместе с этим и эта запись. Но как отменить то действие которое будет через 5 сек? Как отменяется setTimeout?[/u]

Bebek · 14 Ноя 2012

p.s. у меня из-за одного плагина на Мутулс приходится jQuery использовать с ноКонфликт

......

WMix · 14 Ноя 2012

но почему уже клик не реагирует? Опять нужно использовать LIVE? Помоги с этим плз.

оказывается есть действия которые выполняются условно говоря в РЕАЛЬНОМ ВРЕМЕНИ (как ты сказал LIVE) и есть которые статичные - ТУПО ПРИ ЗАГРУЗКЕ СТРАНИЦЫ ПРОСТАВЛЯЕТ СОБЫТИЯ и при подгрузке новых динамичных данных он просто не реагирует.... Я ПРОСТО ЭТО НЕ ЗНАЛ и поэтому были трудности)))

Как отменяется setTimeout?

clearTimeout(id_of_settimeout)

jQuery плагин А не видит динамически-добавленные данные плагином Б

Bebek

Guest

Bebek

Guest

С.

Продвинутый новичок

Bebek

Guest

С.

Продвинутый новичок

Bebek

Guest

WMix

герр M:)ller

Bebek

Guest

WMix

герр M:)ller

Redjik

Джедай-мастер

WMix

герр M:)ller

Bebek

Guest

WMix

герр M:)ller

Bebek

Guest

WMix

герр M:)ller

Bebek

Guest

Bebek

Guest

WMix

герр M:)ller