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

Что вы подразумеваете под "документом"?
И что значит "из верхнего отловить событие третьего"? Эти "документы" вложены друг в друга? Приведите лучше код
...
Рейтинг: 0 / 0
Jquary. Как отловить события.
    #38837509
kunaksergey
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Первый документ: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
Jquary. Как отловить события.
    #38837519
JeStone
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
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
Jquary. Как отловить события.
    #38837521
JeStone
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
хотя, из верхнего же, тогда #group замените на #data
...
Рейтинг: 0 / 0
Jquary. Как отловить события.
    #38837525
kunaksergey
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
а почему я не могу так написать
Код: java
1.
2.
3.
$('a[name=run]').on('Click',function(){
   
});
...
Рейтинг: 0 / 0
Jquary. Как отловить события.
    #38837532
JeStone
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
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
Jquary. Как отловить события.
    #38837533
kunaksergey
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Для вашего примера это будет выглядеть как-то так:
Код: javascript
1.
2.
3.
$( "#group" ).on( "click", "a[name=run]", function() {
  getItem(this);
});



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

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


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


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


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

http://api.jquery.com/attribute-equals-selector/]Attribute Equals Selector [name="value"]
...
Рейтинг: 0 / 0
Jquary. Как отловить события.
    #38837701
JeStone
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
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
12 сообщений из 12, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Jquary. Как отловить события.
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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