Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Jquary. Как отловить события. / 12 сообщений из 12, страница 1 из 1
18.12.2014, 18:28
    #38837493
kunaksergey
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Jquary. Как отловить события.
Есть дерево документов, которые подгружаются с помощью AJAX.
т.е. Первый загружает второй, второй загружает третий.
Как можно из верхнего документа отловить событие третьего используя jquary.
Конкретно нужно событие onClick для узла '<a name=run>'
...
Рейтинг: 0 / 0
18.12.2014, 18:42
    #38837502
JeStone
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Jquary. Как отловить события.
kunaksergey,

Что вы подразумеваете под "документом"?
И что значит "из верхнего отловить событие третьего"? Эти "документы" вложены друг в друга? Приведите лучше код
...
Рейтинг: 0 / 0
18.12.2014, 19:02
    #38837509
kunaksergey
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Jquary. Как отловить события.
Первый документ:index.php: -по событию он загружает второй.
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
<script>
function getItem(obj){
 var name=$(obj).text(),
        id=$(obj).attr('id'); 
       $('#contragent').val(name);
}

function show(type){
 		  $.ajax({
 			url: "dic_grp.php", // куда отправляем
 			cashe:false,
 			type: "POST",
 			 			
 // после получения ответа сервера
		       success: function(data){$('#data').html(data);
		       } //конец success
		  });// конец $.ajax	
			  

}
</script>


Код: html
1.
2.
<div id=data>
</div>




Второй документ dic_grp.php по событию он загружает третий.

Код: c#
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<script>
function selectItem(groupId){
		$.ajax({
 			url: "dic_item.php", // куда отправляем
 			cashe:false,
 			type: "POST",
 			data: ({groupId:groupId
 			}),			
 // после получения ответа сервера
 		success: function(data){ $('#item').html(data);}
 			});  
 	}
</script>


Код: php
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
<?php

//Скрипт выполняется только при POST
include_once 'sql.inc'; 	//файл с sql
include_once 'connect.php';     //соединение
include_once 'inc/lib.php';     //библиотеки

$dic=new DicGoods($dbh); //экземпляр класса DicGoods
$str='';
$result=$dic->getGroup();   //получаем группу DIC_GOODS_GRP
  //формируем группу для вывода
foreach ($result as $key=>$value){
      $str.="<a href=# name=group onClick='selectItem({$value['ID']}); return false;'
	      groupId={$value['ID']}>{$value['SEPARATOR']}{$value['NAME']}</a><br>\n";	
      }
?> 


Код: html
1.
2.
3.
4.
5.
6.
7.
8.
<ul>
  <div id="group" style="float:left">
  <?=$str?>
  </div>
  
  <div id="item">
  </div>
</ul>



Третий документ:dic_item.php

Код: php
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<?php
//Скрипт выполняется только при POST
include_once 'sql.inc'; 	//файл с sql
include_once 'connect.php';     //соединение
include_once 'inc/lib.php';     //библиотеки
$dic=new DicGoods($dbh); //экземпляр класса DicGoods
$str='';
$groupId=$_POST['groupId'];
$result=$dic->getItem($groupId);

 foreach($result as $key=>$value){
   $str.="<a href=# onClick=getItem(this) id={$value['ID']} >{$value['NAME']}</a><br>\n";
      } 
      echo $str;
?>



Для того, что бы получить значение узла <a> из dic_item.php сейчас используется функция getItem(), которая вызывается в нем.
Но хотелось бы использовать перехватчик события в главном документе index.php
...
Рейтинг: 0 / 0
18.12.2014, 19:20
    #38837519
JeStone
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Jquary. Как отловить события.
kunaksergey,

http://api.jquery.com/on/

авторDelegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.


Код: javascript
1.
2.
3.
$( "#dataTable tbody" ).on( "click", "tr", function() {
  alert( $( this ).text() );
});



Для вашего примера это будет выглядеть как-то так:
Код: javascript
1.
2.
3.
$( "#group" ).on( "click", "a[name=run]", function() {
  getItem(this);
});
...
Рейтинг: 0 / 0
18.12.2014, 19:21
    #38837521
JeStone
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Jquary. Как отловить события.
хотя, из верхнего же, тогда #group замените на #data
...
Рейтинг: 0 / 0
18.12.2014, 19:32
    #38837525
kunaksergey
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Jquary. Как отловить события.
а почему я не могу так написать
Код: java
1.
2.
3.
$('a[name=run]').on('Click',function(){
   
});
...
Рейтинг: 0 / 0
18.12.2014, 19:39
    #38837532
JeStone
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Jquary. Как отловить события.
kunaksergey,
читайте документацию, там все написано
авторEvent handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.

Говоря простым языком, в случае
Код: javascript
1.
2.
3.
$('a[name=run]').on('Click',function(){
   
});


вы атачитесь к элементу a на событие клика
В случае
Код: javascript
1.
2.
3.
$( "#group" ).on( "click", "a[name=run]", function() {
  getItem(this);
});


вы атачитесь к элементу с id=group на всплывающее событие (bubbling event) клика от дочернего элемента, удовлетворяющего селектору "a[name=run]", который на момент привязки события может еще не существовать.
...
Рейтинг: 0 / 0
18.12.2014, 19:40
    #38837533
kunaksergey
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Jquary. Как отловить события.
Для вашего примера это будет выглядеть как-то так:
Код: javascript
1.
2.
3.
$( "#group" ).on( "click", "a[name=run]", function() {
  getItem(this);
});



По ходу такая конструкция не работает
...
Рейтинг: 0 / 0
18.12.2014, 19:44
    #38837536
JeStone
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Jquary. Как отловить события.
kunaksergey,

ниже пост прочтите, я поправку сделал. Во-первых
Код: javascript
1.
2.
3.
$( "#data" ).on( "click", "a[name=run]", function() {
  getItem(this);
});


во вторых, на момент срабатывания данного кода элемент
Код: html
1.
2.
<div id=data>
</div>


уже должен существовать. Т.е. вам нужна обертка .ready()
...
Рейтинг: 0 / 0
18.12.2014, 19:54
    #38837542
kunaksergey
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Jquary. Как отловить события.
она и так висит у меня на onready
Код: php
1.
2.
3.
4.
5.
$(function(){
   $( "#data" ).on( "click", "a[name=run]", function() {
    console.log($this);
    });
}


Не выходит каменный цветок
...
Рейтинг: 0 / 0
18.12.2014, 20:56
    #38837585
Alexander A. Sak
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Jquary. Как отловить события.
Слово "run" не надо в апострофы взять?

http://api.jquery.com/attribute-equals-selector/]Attribute Equals Selector [name="value"]
...
Рейтинг: 0 / 0
19.12.2014, 04:05
    #38837701
JeStone
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Jquary. Как отловить события.
kunaksergeyона и так висит у меня на onready
Код: php
1.
2.
3.
4.
5.
$(function(){
   $( "#data" ).on( "click", "a[name=run]", function() {
    console.log($this);
    });
}


Не выходит каменный цветок
Что такое $this? Вам виднее почему у вас лыжи не едут, вот рабочий пример:
http://jsfiddle.net/jh36ut8t/
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Jquary. Как отловить события. / 12 сообщений из 12, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]