Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.06.2015, 00:42
Аватар для blacklool
Аспирант
Отправить личное сообщение для blacklool Посмотреть профиль Найти все сообщения от blacklool
 
Регистрация: 16.01.2014
Сообщений: 50

Грамотное написание кода
Здравствуйте,

не первый день пишу на js, и вот хочу знать как правильно писать js код (а именно jquery) когда на сайте встроена подгрудка страниц и контента через POST и нужно прописывать клики по классам.

Вот пример, есть меню что обновляется пост запросами, но не полностью а частями, мне нужно по классам прописать евенты (клик),

вот мне говорили что нужно прописывать ид и по ним ставить клики, другие по классам, третье прописывать onclick....

как правильно прописывать эти евенты чтобы не было несколько "вызовов" при одном клике, да и вообще как это лучше всего делать?

пример был очень банальный, в реале все намного сложнее, но я хочу понять принцип, так что давайте простые примеры кода, или возможно статьи (просто не знаю как искать это, если есть конкретное наименование, пожалуйста поделитесь )

спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 16.06.2015, 02:52
Профессор
Отправить личное сообщение для caetus Посмотреть профиль Найти все сообщения от caetus
 
Регистрация: 23.09.2014
Сообщений: 197

я б делал как-то так !
Если у тебя например элементы которые вызывают события не в одном родительском блоке тогда вешай по классам !
<div id="div">
<p data-id="id1"></p>
<p data-id="id2"></p>
<p data-id="id3"></p>
</div>
<script>

$('#div').click(function (e) {
	var data = e.target.getAttribute('data-id');
	if(!data) return;
	alert(data) //$.get("index.php", data, myCallback,"json");
});
</script>

Последний раз редактировалось caetus, 16.06.2015 в 02:54.
Ответить с цитированием
  #3 (permalink)  
Старый 18.06.2015, 03:54
Аватар для blacklool
Аспирант
Отправить личное сообщение для blacklool Посмотреть профиль Найти все сообщения от blacklool
 
Регистрация: 16.01.2014
Сообщений: 50

Сообщение от caetus Посмотреть сообщение
я б делал как-то так !
Если у тебя например элементы которые вызывают события не в одном родительском блоке тогда вешай по классам !
<div id="div">
<p data-id="id1"></p>
<p data-id="id2"></p>
<p data-id="id3"></p>
</div>
<script>

$('#div').click(function (e) {
	var data = e.target.getAttribute('data-id');
	if(!data) return;
	alert(data) //$.get("index.php", data, myCallback,"json");
});
</script>
Привет!

интересно
такой вариант возможно доработать, и будет все именно так как мне нужно!

спасибо!
Ответить с цитированием
  #4 (permalink)  
Старый 18.06.2015, 04:07
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

blacklool,
Наверно стоит уникальные ID ставить самим секциям подгрузки, тогда внутри можно разбивать по тем же классам или ID для схожих элементов по стилю, дабы не увеличивать лишних сущностей.
Тогда стиль будет примерно один для схожих секций перечислению селекторов с добавкой селектора секций подгрузки
типа:
#sect1 a, #sect2 a,#sect3 a {
Или
#sect1 .meny2, #sect2 .meny2,#sect3 .meny2{
Ответить с цитированием
  #5 (permalink)  
Старый 18.06.2015, 12:58
Аватар для blacklool
Аспирант
Отправить личное сообщение для blacklool Посмотреть профиль Найти все сообщения от blacklool
 
Регистрация: 16.01.2014
Сообщений: 50

Сообщение от Deff Посмотреть сообщение
blacklool,
Наверно стоит уникальные ID ставить самим секциям подгрузки, тогда внутри можно разбивать по тем же классам или ID для схожих элементов по стилю, дабы не увеличивать лишних сущностей.
Тогда стиль будет примерно один для схожих секций перечислению селекторов с добавкой селектора секций подгрузки
типа:
#sect1 a, #sect2 a,#sect3 a {
Или
#sect1 .meny2, #sect2 .meny2,#sect3 .meny2{
Привет, да в принципе можно делать и так

я вот до сих пор как то так добавлял евенты после каждой подгрудки, просто вызывал функцию

$('a:not(.worked)')
	.addClass('worked')
	.click(function(e){
		if ($(this).hasClass('worked')) {
			e.preventDefault()
			content_load(this.href)
		}
	})

Последний раз редактировалось blacklool, 18.06.2015 в 13:00.
Ответить с цитированием
  #6 (permalink)  
Старый 18.06.2015, 13:39
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

blacklool,
Поробуйте с помощью делегирования:
$(document).on('click', 'a.to-load', function(e){
	e.preventDefault()
	content_load(this.href)
});

Создает один обоаботчик на документе и будет слушать клик по 'a.to-load', в не зависимости от того когда он появился в DOM.
https://learn.javascript.ru/event-delegation
Ответить с цитированием
  #7 (permalink)  
Старый 18.06.2015, 14:11
Аватар для blacklool
Аспирант
Отправить личное сообщение для blacklool Посмотреть профиль Найти все сообщения от blacklool
 
Регистрация: 16.01.2014
Сообщений: 50

Сообщение от tsigel Посмотреть сообщение
blacklool,
Поробуйте с помощью делегирования:
$(document).on('click', 'a.to-load', function(e){
	e.preventDefault()
	content_load(this.href)
});

Создает один обоаботчик на документе и будет слушать клик по 'a.to-load', в не зависимости от того когда он появился в DOM.
https://learn.javascript.ru/event-delegation
ооо так еще лучше!
прочитал статью, разобрался, теперь не забуду
спасибо!
Ответить с цитированием
  #8 (permalink)  
Старый 18.06.2015, 14:43
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Там вообще много полезного. Полазийте там.
https://learn.javascript.ru/animation
https://learn.javascript.ru/drag-and-drop
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавающий блок, не работает часть кода в joomla 3 Kuzma jQuery 1 06.05.2015 10:28
Правильное написание кода genny45 Events/DOM/Window 3 12.02.2015 15:51
Как визуализировать структуру кода? dkudrin Общие вопросы Javascript 2 22.08.2014 19:12
скрыть из исходного кода часть javascript кода. javasc Javascript под браузер 10 12.03.2014 08:32
Прошу помощи, грамотное размножение куска кода M2_ jQuery 4 14.03.2010 14:21