Javascript.RU

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

Выполнение функций JQuery в полученных Ajax данных
Доброго времени суток. Суть моей проблемы заключается в том, что я с использованием JQuery сделал выпадающий список с изменяющимся + на - при нажатии. В рамках страницы все работает, а вот данные полученные с помощью Ajax отказываются обрабатывать функцию при клике по +.

Здесь можно посмотреть скрипт в работе.
Вот часть его кода:
<?

if($_GET['ajax'] == true && $_GET['docincat']){
	header("Content-type: text/html; charset=UTF-8");
	header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
	header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
	header("Cache-Control: no-cache, must-revalidate");
	header("Cache-Control: post-check=0,pre-check=0", false);
	header("Cache-Control: max-age=0", false);
	header("Pragma: no-cache");

	echo("<DIV class=\"cat\">");
	echo("<a class = \"close\" href=\"index.php?cat=1\" onclick='$(\"div.cat > #doc_1\").toggle();return false;' title=\"\"></A><B CLASS=\"Active\">Ajax loaded data</B>");
	echo(" <a href=\"/docs.php?doc=skdoc_X0\">example</a><DIV id = \"doc_1\" class=\"s_close\">sub</DIV></DIV><br>");

	exit;
}


###### END AJAX DOC_IN_FLD ######


?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=win-1251" />
<title>test</title>
<script type="text/javascript">
// Add jQuery latest pack
	var GM_JQ = document.createElement('script');
	GM_JQ.src = 'http://code.jquery.com/jquery-latest.pack.js';
	GM_JQ.type = 'text/javascript';
	document.getElementsByTagName('head')[0].appendChild(GM_JQ);

</script>

<style>
div.s_close { display: none;}
a { color: #000000; text-decoration: none}
a:hover { color: #2a93cf; text-decoration: none}
a.close { background: url('/images/+.gif') left no-repeat; padding: 2px 0px 0 16px;}
a.open  { background: url('/images/-.gif') left no-repeat; padding: 2px 0px 0 16px;}
</style>

</head>
<body>

<script type="text/javascript">
$(document).ready(function(){
	$("div.cat > a.open").toggle(function(){
		$(this).removeClass("open");
		$(this).addClass("close");
	}, function(){
		$(this).removeClass("close");
		$(this).addClass("open");
	});
	$("div.cat > a.close").toggle(function(){
		$(this).addClass("open");
		$(this).removeClass("close");
	}, function(){
		$(this).addClass("close");
		$(this).removeClass("open");
	});
});


function docs(fid,page){
    $('#doc').empty().append('<img src=\'/images/ajax-loader.gif\'>Загрузка...').load('/1.php?ajax=true&docincat='+fid+'&page='+page);
 }

</script>


<DIV class="cat">
<a class="close" href="index.php" onclick='$("div.cat > #sub_222").toggle();return false;' title="11">Work</a>
<DIV id="sub_222" class="s_close">sub</DIV></DIV>
<DIV id = "doc" style="width:40%;">
<a href="index.php" onclick='docs("1","0");return false;' title="333"><span>Click to Ajax load</span></a></DIV>

<DIV id = "doc" style="width:40%;"></DIV>
</body></html>
Ответить с цитированием
  #2 (permalink)  
Старый 30.03.2009, 07:32
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

а что делает вызов toggle без параметров в обработчиках onclick?
Ответить с цитированием
  #3 (permalink)  
Старый 30.03.2009, 17:48
Новичок на форуме
Отправить личное сообщение для ShaMAD Посмотреть профиль Найти все сообщения от ShaMAD
 
Регистрация: 30.03.2009
Сообщений: 4

Он отвечает за отображение и скрытие подпункта(sub).
Ответить с цитированием
  #4 (permalink)  
Старый 30.03.2009, 18:10
Новичок на форуме
Отправить личное сообщение для ShaMAD Посмотреть профиль Найти все сообщения от ShaMAD
 
Регистрация: 30.03.2009
Сообщений: 4

Разобрался, ответ нашел в Почему не работает JS с подгруженными в DOM элементами?
Ответить с цитированием
  #5 (permalink)  
Старый 30.03.2009, 19:47
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

да, оказывается toggle это и событие, и эффект (в зависимости от количества переданных параметров)

по поводу проблемы же есть еще такая штука как event delegation: обработчики назначаются не на элементы, а на селекторы, т.е. при пересоздании элемента опять назначать обработчик не надо
Ответить с цитированием
  #6 (permalink)  
Старый 31.03.2009, 18:34
Новичок на форуме
Отправить личное сообщение для ShaMAD Посмотреть профиль Найти все сообщения от ShaMAD
 
Регистрация: 30.03.2009
Сообщений: 4

Сообщение от x-yuri Посмотреть сообщение
по поводу проблемы же есть еще такая штука как event delegation: обработчики назначаются не на элементы, а на селекторы, т.е. при пересоздании элемента опять назначать обработчик не надо
Хм... А можно примерчик?
Ответить с цитированием
  #7 (permalink)  
Старый 31.03.2009, 23:07
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

конечно, http://plugins.jquery.com/search/nod...roject_project
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jQuery Ajax - 3 дня мучений :) grusha jQuery 4 01.09.2010 05:53
jQuery Ajax Rater Plugin и массив POST - Нужна помощь TROODON jQuery 12 30.12.2009 21:44
Синхронный запрос данных по AJAX Shasoft AJAX и COMET 2 03.03.2009 13:07
Сложный случай jQuery + AJAX + динамическое изменение страницы Opera/IE no. Общие вопросы Javascript 2 24.02.2009 03:24
Просмотр передаваемых данных через AJAX Гость AJAX и COMET 3 04.08.2008 13:34