Форум

NeVirus · #1 (**permalink**) 28.02.2013, 13:39

Добрый день,

такая ситуация - есть динамически созданная сетка из div' ов, в самих дивах лежат span' ы и картинки (то же все создается динамически), при клике на div выскакивает popup окошко с инфой конкретно по объектам того div' а на который тыкнули. Вот так инфа загоняется в popup:

open: function() {	
					var goods_id = event.target.id;
					$('#popup_id').val(goods_id);
					$('#popup_type').val(JSON.stringify( goods[goods_id-1].type));
					$('#popup_title').val(JSON.stringify( goods[goods_id-1].title));
					$('#popup_manufacturer').val(JSON.stringify( goods[goods_id-1].manufacturer));
					$('#popup_description').val(JSON.stringify( goods[goods_id-1].description));
					$('#popup_price').val(JSON.stringify( goods[goods_id-1].price));
					$('#popup_in_stock').val(JSON.stringify( goods[goods_id-1].in_stock));
					},

Тут все понятно и работает. Но если клик был по потомку div' a например по вставленной картинке то соответственно ID не получается процедурой и инфа не достается.
Итак вопрос - как можно заставить обрабатывать клик по потомку как клик по предку, попутно остановив клик по самому потомку? С виду все просто но из за того что все создается динамически выходит много проблем(

P.S. не по теме, но то же нужно - как можно ajax запросом обновить данные в файле json? хотя бы намек

ksa · #2 (**permalink**) 28.02.2013, 15:13

Сообщение от NeVirus

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

Это как понять?

В каком бы месте "предка" ты не ткнул - его событие таки выполнится, если всплытие события не остановить
http://javascript.ru/tutorial/events...ovka-vsplytiya

danik.js · #3 (**permalink**) 28.02.2013, 16:12

NeVirus, я не понял, а на какой элемент обработчик навешан? В обработчике this указывает на элемент, на котором навешан обработчик, а event.target - на элемент, на котором событие было инициировано (то есть в данном случае непосредственно элемент, по которому кликнули)

dmitriymar · #4 (**permalink**) 28.02.2013, 21:17

Сообщение от danik.js

В обработчике this указывает на элемент, на котором навешан обработчик,

только не в ИЕ.

<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<style type="text/css">
#apDiv1 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	background-color: #0000FF;
}
#apDiv2 {
	position:absolute;
	width:155px;
	height:73px;
	z-index:1;
	background-color: #FFFF00;
	left: 25px;
	top: 16px;
}
</style>
</head>

<body>
<div id="apDiv1">
  <div id="apDiv2">Click</div>
</div>
<script>
 if (document.attachEvent) document.getElementById('apDiv1').attachEvent('onclick',function(){alert(this.id)});
 else document.getElementById('apDiv1').addEventListener('click',function(){alert(this.id)},false);
</script>
</body>

danik.js · #5 (**permalink**) 01.03.2013, 00:27

Сообщение от dmitriymar

только не в ИЕ.

Это можно дописать практически к любому высказыванию. Только с маленькой поправкой: "только не в древних ИЕ".

Например это же применимо и к:

Сообщение от danik.js

event.target

Вместо которого с старых ишаках srcElemement.

Спысла упоминать это нет, так как видно что автор использует jQuery. Так или иначе все это легко воркэраундится и не создает серьезных проблем.

Другое дело с фазой перехвата и с stopImmediatePropagation - тут беда..

рони · #6 (**permalink**) 01.03.2013, 01:23

Сообщение от NeVirus

при клике на div

так и берите id того дива к которому привязан клик ...
2 варианта $(this).attr('id') или event.delegateTarget.id

<!DOCTYPE HTML>

<html>
<head>
  <title></title>
  <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
</script>
  <script type="text/javascript">
        $(function () {
                         $("#apDiv1").click(function (event) {
                         alert("event.target.id : "+event.target.id
                         +"\n$(this).attr('id') : "+$(this).attr('id')
                         +"\nevent.delegateTarget.id : "+event.delegateTarget.id);
                    });
                });


  </script>
  <meta charset="utf-8">

  <title>Документ без названия</title>
  <style type="text/css">
#apDiv1 {
    position:absolute;
    width:400px;
    height:215px;
    z-index:1;
    background-color: #0000FF;
  }
  #apDiv2 {
    position:absolute;
    width:355px;
    height:173px;
    z-index:1;
    background-color: #FFFF00;
    left: 25px;
    top: 16px;
  }
  </style>
</head>

<body>
  <div id="apDiv1">
    <div id="apDiv2">Click<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"
    border="0" alt=""></div>
  </div>
</body>
</html>

NeVirus · #7 (**permalink**) 01.03.2013, 07:50

Спасибо всем кто отписался,

что такое всплытие я знаю, про "delegateTarget" тоже - вся проблема в том что элементы создаются динамически "event.delegateTarget" возвращает в этом случае "#document".

Я могу получить ID нужного дива вот так

$(this).parent(this).attr("id");

но обработать событие клика по нему у меня не выходит (

UPD:

Все разобрался... отсеял event.target' ы по наличию нужного предка в самой процедурке вызова поп-апа, ну а вопрос с делегированием на динамических объектах видимо пока останется открытым

рони · #8 (**permalink**) 01.03.2013, 11:01

NeVirus,
наверное (но лучше сами сказали) у вас клик стоит на документе а див идёт в контексте -- поэтому конец всплытия delegateTarget это "#document".
тогда искать можно так

var goods_id = $(this).attr("id")||$(this).parents("div:first").attr("id")

Форум

Справочник

Discord чат

Курсы javascript