Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.10.2014, 13:34
Новичок на форуме
Отправить личное сообщение для VshurygaV Посмотреть профиль Найти все сообщения от VshurygaV
 
Регистрация: 08.10.2014
Сообщений: 8

Событие в событии
Ребят всем привет Тема такая. При нажатии на блок ajax запросом выводяться блоки с информацией и блоки меню. далее нажимаем на один из блоков меню и заместо тех блоков с информацией появляются другие блоки. Проблема в следующем - при нажатии на блок меню код срабатывает. но при повторном нажатии уже не срабатывает. Код постараюсь расписать понятнее

вот скрипт с ajax запросами

$(document).ready(function(){
var data, id_nav, stranica = 1, id, KolProizvod, x;

/*При нажатии выводим блоки с информацией и меню*/
$('.slider1-li').click(function(){
	id = this.id;
        /*Меняем цвеи рамки того блока на который нажали*/
	KolProizvod = document.getElementsByClassName('slider1-li');
	x = document.querySelectorAll(".slider1-li");
	for(var i=0; i<KolProizvod.length; i++)
		{
		x[i].style.border = '2px solid #ffffff'
		}
	document.getElementById(id).style.border = '2px solid #c40135';
        /*Запросом выводим из базы блоки*/
	$.post("/netcat/modules/default/vivod-all-vendor-fuction.php",
		{
		stranica:stranica,
		id:id,
		zagolovok:zagolovok,
		},
		function(data)
			{
			document.querySelector('.ves-spisok').innerHTML = data;
                /*При нажатии выводим другие блоки с информацией и меню*/
	            $('.but_nav').click(function(){
                                       /*Получаем id на который нажали и выводим из базы блоки*/
					stranica = this.id;
					$.post("/netcat/modules/default/vivod-all-vendor-fuction.php",
						{
						stranica:stranica,
						id:id,
						zagolovok:zagolovok,
						},
						function(data)
							{
							document.querySelector('.ves-spisok').innerHTML = data;
							});
						
	            });
			return false;
			}
		);
	});
});


Код vivod-all-vendor-fuction.php

<?

/*считаем сколько всего есть у нас блоков */
$Subdivision_vendor = mysql_query("SELECT * FROM Message2011 WHERE Vendor = ".$id."", $db);
$myrow_vendor = mysql_fetch_array($Subdivision_vendor);
do
	{
	$row_all++;
	}
while ($myrow_vendor = mysql_fetch_array($Subdivision_vendor));
/*считаем сколько блоков меню нам потребуеться */
$count_but = (int)($row_all / $kolvo);
if (($row_all % $kolvo) != 0){
$count_but++;
}
/*выводим блоки */
	$Subdivision_vendor = mysql_query("SELECT * FROM Message2011 WHERE Vendor = ".$id." LIMIT ".$start.", ".$kolvo."", $db);
	$myrow_vendor = mysql_fetch_array($Subdivision_vendor);
	do
		{
		echo "
				<div class='div_one_block'>
					<div class='block_img'>
						<a href='".nc_message_link($myrow_vendor['Message_ID'], 2011)."'><img src='".nc_file_path(2011, $myrow_vendor['Message_ID'], 'Pic_prew')."' class='tovar_icon' alt=''/></a>
					</div>
					<div class='spisok_opisaniya'>
						<div class='nazvanie-tovara'><a href='".nc_message_link($myrow_vendor['Message_ID'], 2011)."' class='nazvanie-tovara-sylka'>".$myrow_vendor['Name']."</a></div>
						<div class='kasta'>";
							if ($myrow_vendor['Spec_krat'] > '') 
								{ 
								foreach ( explode("\n", $myrow_vendor['Spec_krat']) as $res )
									{
									echo "<div class='stroka-tovar'><div class='stroka-tovar-left'>".str_replace("==", "</div><div class='stroka-tovar-right'>", $res)."</div></div>"; 
									}
								}
							echo "
						</div>
					</div>
					<div class='block_cena'>
						<div class='sgirn-cena'>".$myrow_vendor['Cena']."</div><div class='small-cena'>руб./м2</div>
						<div class='clear'></div>
						<a href='".nc_message_link($myrow_vendor['Message_ID'], 2011)."' class='knopka_podrobnee'>Подробнее</a>
					</div>
				</div>";
		}
	while ($myrow_vendor = mysql_fetch_array($Subdivision_vendor));
	/*выводим блоки меню */
	$stran = 1;
	do 
		{
		echo "<div class='but_nav' id='".$stran."'  style='float:left'>".$stran."</div>";
		$stran++;
		}	
	while($stran <= $count_but )?>



Я так подозреваю, что дело в том, что второе событие находиться в теле 1 события, но убирая событие из тела первого оно вообще перестает работать даже первый раз. я Извиняюсь что так много кода но я и так сократил как смог чтоб да так чтоб еще и осталось понятно. Помогите пожалуйста я уже не один мануал облазил и не на одном форуме посидел никто не может объяснить почему так. Может вы знаете

Последний раз редактировалось VshurygaV, 14.10.2014 в 13:39.
Ответить с цитированием
  #2 (permalink)  
Старый 14.10.2014, 13:53
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от VshurygaV
id = this.id;
...
document.getElementById(id).style.border = '2px solid #c40135';
Мощьно )
Вообще код мощьный. Надо взять пару уроков у тебя )
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 14.10.2014, 13:55
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от VshurygaV
находиться в теле 1 события
Что есть "тело события"? Допустим событие - зазвенел будильник. Где у этого события "тело"?
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #4 (permalink)  
Старый 14.10.2014, 13:58
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от VshurygaV
document.querySelector('.ves-spisok').innerHTML = data;
Вот тут ты убиваешь все содержимое элемента .ves-spisok. Ты это осознаешь? Все его дочерние элементы будут уничтожены, вместе с их обработчиками событий. Вместо них придут другие, возможно с теми же классами и id.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #5 (permalink)  
Старый 14.10.2014, 14:09
Новичок на форуме
Отправить личное сообщение для VshurygaV Посмотреть профиль Найти все сообщения от VshurygaV
 
Регистрация: 08.10.2014
Сообщений: 8

Да я все это осознаю. тело события я называю то что происходит при событии т.е.

$('.sel1').click(function(){
/*Тело события*/
	inne = this.id
	document.querySelector('.all').innerHTML = '<div>Helloy word</div>';
/*Закончилось тело события*/
});


Я написал простой код но там все гораздо понятнее, а проблема та же

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/ind.js"></script>
<style>
     .block{
      width:100px;
      height:100px;
      background:silver;
      }
</style>
</head>
<body>
       <div class='block'></div>
       <div class='all'>
                Вместо этого блока появятся три других
       </div>
</body>
</html>



/*Так работает только если при первом нажатии на sel1*/

$(document).ready(function(){
	$('.block').click(function(){
		document.querySelector('.all').innerHTML = '<div id=\'20\' class=\'sel1\'>1</div><div id=\'30\' class=\'sel1\'>2</div><div id=\'40\' class=\'sel1\'>3</div>';
	
		$('.sel1').click(function(){
		inne = this.id
		document.querySelector('.all').innerHTML = '<div id=\'20\' class=\'sel1\'>'+inne+'</div><div id=\'30\' class=\'sel1\'>'+inne+'</div><div id=\'40\' class=\'sel1\'>'+inne+'</div>';
		});
	});
	
});



/*Так вообще не работает почему? и как сделать чтоб работыло?*/

$(document).ready(function(){
	$('.block').click(function(){
		document.querySelector('.all').innerHTML = '<div id=\'20\' class=\'sel1\'>1</div><div id=\'30\' class=\'sel1\'>2</div><div id=\'40\' class=\'sel1\'>3</div>';
		
	});

$('.sel1').click(function(){
		inne = this.id
		document.querySelector('.all').innerHTML = '<div id=\'20\' class=\'sel1\'>'+inne+'</div><div id=\'30\' class=\'sel1\'>'+inne+'</div><div id=\'40\' class=\'sel1\'>'+inne+'</div>';
		});
	
});
Ответить с цитированием
  #6 (permalink)  
Старый 14.10.2014, 14:11
Новичок на форуме
Отправить личное сообщение для VshurygaV Посмотреть профиль Найти все сообщения от VshurygaV
 
Регистрация: 08.10.2014
Сообщений: 8

Повторюсь что мне нужно
Нажимаю на div class='block' появляються три других блока. Далее нажимаю на один из появившихся они меняються. (на этом мой код перестает работать). далее нажимаю на другой из них они о5 меняються.
Ответить с цитированием
  #7 (permalink)  
Старый 14.10.2014, 14:13
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от VshurygaV
/*Так вообще не работает почему? и как сделать чтоб работыло?*/
В 9й строчке ты навешиваешь обработчик на элемент, которого просто напросто не существует. Посмотри в свой HTML код и покажи где там .sel1?

Сообщение от VshurygaV
Да я все это осознаю
Выходит нихрена ты не осознаешь. Перечитай еще раз и вдумайся.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #8 (permalink)  
Старый 14.10.2014, 14:18
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от VshurygaV
Повторюсь что мне нужно
Ну ты либо не затирай innerHTML, если это тебе подойдет, либо вешай обработчик на самого близкого предка, которого ты не бомбишь через innerHTML и делегируй обработку кликов ему. Делегирование в jQuery делается так:


// делегируем клики элементу all. Если целевой элемент события будет соответствовать селектору .sel1, будет вызван этот обработчик.
$('.all').on('click', '.sel1', function() {

});
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #9 (permalink)  
Старый 14.10.2014, 14:26
Новичок на форуме
Отправить личное сообщение для VshurygaV Посмотреть профиль Найти все сообщения от VshurygaV
 
Регистрация: 08.10.2014
Сообщений: 8

Да я согласен что его нет в html Но ведь эти блоки выводятся На страницу в данной функции

{
$('.block').click(function(){

});


Цитата:
Ну ты либо не затирай innerHTML, если это тебе подойдет, либо вешай обработчик на самого близкого предка, которого ты не бомбишь через innerHTML и делегируй обработку кликов ему. Делегирование в jQuery делается так:


1 // делегируем клики элементу all. Если целевой элемент события будет соответствовать селектору .sel1, будет вызван этот обработчик.
2 $('.all').on('click', '.sel1', function() {
3
4 });
Прошу прощения но этого предложения я не понял. В последнем примере я же не затираю innerHTML я его заменяю
Ответить с цитированием
  #10 (permalink)  
Старый 14.10.2014, 14:29
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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

Вот когда выведешь блок - тогда и цепляй к нему обработчик. Ну или делегирование. Пример выше давал.
__________________
В личку только с интересными предложениями
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отличить событие, вызванное пользователем, от программного. upvasil Events/DOM/Window 6 22.10.2013 21:30
Событие click Гробовщик jQuery 1 31.07.2013 07:28
Как правильно подавить событие при подключении своего обработчика? Маэстро Firefox/Mozilla 2 03.09.2011 11:46
событие в событии Kubert jQuery 3 31.08.2011 11:27
какое событие возникает во время формирования html IT-AleX Events/DOM/Window 2 20.02.2009 16:13