Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Событие в событии (https://javascript.ru/forum/dom-window/50849-sobytie-v-sobytii.html)

VshurygaV 14.10.2014 13:34

Событие в событии
 
Ребят всем привет:) Тема такая. При нажатии на блок 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 события, но убирая событие из тела первого оно вообще перестает работать даже первый раз. я Извиняюсь что так много кода но я и так сократил как смог чтоб да так чтоб еще и осталось понятно. Помогите пожалуйста я уже не один мануал облазил и не на одном форуме посидел никто не может объяснить почему так. Может вы знаете

danik.js 14.10.2014 13:53

Цитата:

Сообщение от VshurygaV
id = this.id;
...
document.getElementById(id).style.border = '2px solid #c40135';

Мощьно )
Вообще код мощьный. Надо взять пару уроков у тебя )

danik.js 14.10.2014 13:55

Цитата:

Сообщение от VshurygaV
находиться в теле 1 события

Что есть "тело события"? Допустим событие - зазвенел будильник. Где у этого события "тело"?

danik.js 14.10.2014 13:58

Цитата:

Сообщение от VshurygaV
document.querySelector('.ves-spisok').innerHTML = data;

Вот тут ты убиваешь все содержимое элемента .ves-spisok. Ты это осознаешь? Все его дочерние элементы будут уничтожены, вместе с их обработчиками событий. Вместо них придут другие, возможно с теми же классами и id.

VshurygaV 14.10.2014 14:09

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

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

VshurygaV 14.10.2014 14:11

Повторюсь что мне нужно
Нажимаю на div class='block' появляються три других блока. Далее нажимаю на один из появившихся они меняються. (на этом мой код перестает работать). далее нажимаю на другой из них они о5 меняються.

danik.js 14.10.2014 14:13

Цитата:

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

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

Цитата:

Сообщение от VshurygaV
Да я все это осознаю

Выходит нихрена ты не осознаешь. Перечитай еще раз и вдумайся.

danik.js 14.10.2014 14:18

Цитата:

Сообщение от VshurygaV
Повторюсь что мне нужно

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


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

});

VshurygaV 14.10.2014 14:26

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

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

});


Цитата:

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


1 // делегируем клики элементу all. Если целевой элемент события будет соответствовать селектору .sel1, будет вызван этот обработчик.
2 $('.all').on('click', '.sel1', function() {
3
4 });
Прошу прощения но этого предложения я не понял. В последнем примере я же не затираю innerHTML я его заменяю

danik.js 14.10.2014 14:29

Цитата:

Сообщение от VshurygaV
Но ведь эти блоки выводятся На страницу в данной функции

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

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

VshurygaV 14.10.2014 14:29

Цитата:

Сообщение от VshurygaV
Да я все это осознаю
Выходит нихрена ты не осознаешь. Перечитай еще раз и вдумайся.
Дело в том что мне прежде чем в него записать (в первом примере) его надо зачистить т.к. он заполнен после чего уже наполнять

danik.js 14.10.2014 14:30

Что за знак доллара у тебя в коде? Ты так пытаешься привлечь к себе деньги?

VshurygaV 14.10.2014 14:37

Спасибо сейчас попробую

VshurygaV 14.10.2014 14:39

Класс все работает огромное спасибо ты не представляеш как ты меня выручил)))

kostyanet 14.10.2014 20:19

ТС, Это военная хитрость делать череж: loop - while или военная хитрость?

kostyanet 14.10.2014 20:20

Цитата:

/*считаем сколько всего есть у нас блоков */
Военная хитрость:

http://php.net/manual/en/function.mysql-num-rows.php


Часовой пояс GMT +3, время: 06:32.