События в javascript

← →
xayam © (2010-06-04 20:17) [0]

Проблема такая. Используется jquery. Есть такая таблица построенная на дивах:
<div id="table_list"> <div class="list"> <div class="head"> <div>Столб1</div> <div>Столб2</div> <div>Столб3</div> <div>Столб4</div> <div>Столб5</div> <div>Столб6</div> </div> <div class="row"> <div>Столб1</div> <div>Столб2</div> <div>Столб3</div> <div>Столб4</div> <div>Столб5</div> <div>Столб6</div> </div> <div class="row"> ... </div> ... </div> </div>
соответствующий ей код css:
div.list { width: 100%; border: none; display: table; } div.list div.head { width: 100%; font-weight: bold; cursor: default; display: table-row; } div.list div.row { width: 100%; height: 25px; display: table-row; cursor: pointer; } div.list div.head div, div.list div.row div { vertical-align: center; text-align: center; width: 16.66%; height: 25px; display: table-cell; } .list_row_active { background-color: #DAE2E8; }
и такой код для клика на ячейке этой таблице:
$(document).ready( function () { $("#table_list div.list div.row div").click(function () { alert("ОК"); $("#table_list div.list div.row").removeClass("list_row_active"); $(this).parent().addClass("list_row_active"); return false; }); });
ошибок в коде не видно, но клик упорно не работает (alert не выводится и строка не подсвечивается). Почему?

← →
KilkennyCat © (2010-06-04 21:03) [1]

навскидку, иерархия не та.

← →
aka (2010-06-04 21:06) [2]

наверное нельзя ссылаться на елементы так как их id(#) и класс(.) прописаны в файлах стилей div.list, div.row JQuery работает с DOM
елементами которое имеют свой "id" либо "класс" в контексте объекта document где у тебя:

<div id="table_list">
<div class="list">
<div class="row">

так как тогда можно обращаться таким образом:
$("#table_list div.list div.row div")

из этого правильно только $("#table_list)

PS я с JQuery никогда не работал, пока без него получается обойтись
Ответ это только мое мнение, может не привильное.

← →
KilkennyCat © (2010-06-04 21:11) [3]

> xayam

подключи в файерфоксе дебаггер, увидишь сразу.

← →
xayam © (2010-06-04 21:27) [4]

> KilkennyCat © (04.06.10 21:03) [1]
> навскидку, иерархия не та.

в каком месте? вроде правильно, сначала идет уникальный id потом таблица list и строки таблице с вложенными ячейками.

> подключи в файерфоксе дебаггер, увидишь сразу.

так не показывает ошибок

> наверное нельзя ссылаться на елементы так как их id(#) и
> класс(.) прописаны в файлах стилей div.list, div.row JQuery
> работает с DOM
> елементами которое имеют свой "id" либо "класс" в контексте
> объекта document где у тебя

вот это не понял. Как id можно в css прописать?

> из этого правильно только $("#table_list)

пробел http://api.jquery.com/descendant-selector/
# http://api.jquery.com/id-selector/
. http://api.jquery.com/class-selector/
все селекторы описаны в документации по ссылкам.

← →
KilkennyCat © (2010-06-04 21:30) [5]

> xayam © (04.06.10 21:27) [4]

> в каком месте?

$(document).ready(

← →
KilkennyCat © (2010-06-04 21:31) [6]

> так не показывает ошибок

а дело не в ошибке. там же можно увидеть ссылочность, как именно будет называться необходимый объект

← →
aka (2010-06-04 21:32) [7]

> xayam © (04.06.10 21:27) [4]

Я не правильно написал, извиняюсь, ну я и написал что это только мнение

у меня прекрасно работает
$("#table_list, div.list, div.row div"). когда поставил запятые

← →
aka (2010-06-04 21:33) [8]

> $("#table_list, div.list, div.row div")

$("#table_list, div.list, div.row, div").

← →
aka (2010-06-04 21:41) [9]

> пробел http://api.jquery.com/descendant-selector/

$("form input")

ну так это для событий всех дочерних елементов input от form

← →
xayam © (2010-06-04 21:43) [10]

> aka (04.06.10 21:33) [8]
> у меня прекрасно работает
> $("#table_list, div.list, div.row, div")

хе, хе работать то конечно работает, но неправильно. Мне внутри функции нужно чтобы была ссылка this на кликнутую строку/ячейку, а в твоем случае кликается вообще ВСЕ. Как я по-твоему выделю другим цветом кликнутую строку/ячейку?

> ну так это для событий всех дочерних елементов input от
> form

ну как бы у меня как раз такой случай только с div

← →
aka (2010-06-04 22:19) [11]

Топик старт -

> но клик упорно не работает

> твоем случае кликается вообще ВСЕ

Заработал?

> ну как бы у меня как раз такой случай только с div

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

А как нужно, это только тебе знать, я воочию не видел как должно быть, по описанию не понятно ничего. Подход видно не правильный. Тут и без jquery можно прекрасно обойтись подсовывая стили кликнутым елементам

← →
xayam © (2010-06-04 22:25) [12]

> > твоем случае кликается вообще ВСЕ
> Заработал?

что не работает, что работает неправильно - для меня одно и тоже. Мое не работает. Твое неправильно (поскольку через запятые отбирается целиком таблица-div, строки игнорируются)

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

вот как раз так нужно, но не работает (на последней div-ячейке)

> Подход видно не правильный

код весь дал. Где неправильно я не вижу, и никто не показал где.

> Тут и без jquery можно прекрасно обойтись подсовывая стили
> кликнутым елементам

это да, но я во многих других местах его использую еще.

← →
aka (2010-06-04 22:34) [13]

ну код же не правильный? а вот ты бы объяснил на пальцах как должно быть.

← →
xayam © (2010-06-04 22:41) [14]

> aka (04.06.10 22:34) [13]
> ну код же не правильный?

где?!!!!!!!!!!!!!!!!! Покажите мне это место :)

> а вот ты бы объяснил на пальцах как должно быть

должен фиксироваться клик на ячейке-div (самый последний уровень вложенности).
Для этого используется селектор
#table_list div.list div.row div
далее удаляются все ранее выделенные строки (если они есть)
$("#table_list div.list div.row").removeClass("list_row_active");
потом выделяется текущая строка кодом добавления того же класса:
$(this).parent().addClass("list_row_active");

← →
xayam © (2010-06-04 22:48) [15]

скорей всего проблема есть потому что таблицу-div создаю динамически, статическая работает. Как это обойти? Нужно обязательно динамическое заполнение/создание.

← →
aka (2010-06-04 22:56) [16]

> xayam © (04.06.10 22:41) [14]

К стати откройте в IE а затем в Оpera, не смущает?

> создаю динамически,

через innerHTML =

← →
aka (2010-06-04 22:57) [17]

> aka (04.06.10 22:56) [16]

через innerHTML = ?

← →
xayam © (2010-06-04 23:07) [18]

> К стати откройте в IE а затем в Оpera, не смущает?

в ie 7 и ниже работать не должно

> aka (04.06.10 22:57) [17]
> через innerHTML = ?

и так document.getElementById("tl_players").innerHTML = s пробовал и так $("#tl_players").html(s); - никак не работает (в смысле таблица визуально создается, но когда происходит клик, то как будто ее и нет)

← →
xayam © (2010-06-04 23:09) [19]

tl_players = table_list

← →
KilkennyCat © (2010-06-04 23:23) [20]

блин, я решал эту ппроблему, но не помню как. помню, именно в правильном укпзании объекта было дело, и выявил именно через дебаггер файрфоксовский..

← →
aka (2010-06-04 23:29) [21]

Расскажу по своей такой же недавней по сути ошибке:

к примеру: создаю в цикле некоторое кол-во дивов(<div>)

for(var i=0; i < 10; i++) {
text += "<div id="dv_"+i+"">див №_"+i+"</div>";
parentElement.innerHTML = text; // parentElement - любой родительский
var d = document.getElementById("dv_"+i);
d.onclick = вешаю событие; //только в IE в остальный d.click
}

И где будет срабатывать событие? Ответ: только у последнего дива.
после того как повесили событие на какой то елемент нельзя его перетирать
этим arentElement.innerHTML = text;
событие "теряется"

> потому что таблицу-div создаю динамически
не проблема

<html> <head> <title></title> <script type="text/javascript" src="jquery.js"></script> <style type="text/css"> /*<![CDATA[*/ .row_active { background-color: #DAE2E8; } /*]]>*/ </style> <script language="JavaScript" type="text/javascript"> /*<![CDATA[*/ $(document).ready(function() { var text = ""; for(var i=0; i < 10; i++) { text += "<div id="dv_"+i+"">див №_"+i+"</div>"; } $("#parent").html(text); $("#parent").click(function(e) { $("#parent div").removeClass("row_active") $(e.target).addClass("row_active") }); }); /*]]>*/ </script> </head> <body> <div id="parent"></div> </body> </html>

> sniknik © (05.06.10 00:20) [22]
> > потому что таблицу-div создаю динамически
> не проблема

спасибо. Вот что значит профессионал пришел :) Сразу заработало :)
PS Читал примеры по jquery но параметр e нигде не видел, везде this использовался вроде

> но параметр e нигде не видел
http://api.jquery.com/click/
... .click( handler(eventObject) ) ...

> sniknik © (05.06.10 01:00) [24]
> > но параметр e нигде не видел
> http://api.jquery.com/click/

смешно, но все примеры по ссылки без параметра :)

> спасибо. Вот что значит профессионал пришел

Будем знать. :)

> смешно, но все примеры по ссылки без параметра :)
ну да, но описание то есть, хотя я тоже когда надо было не обратил на него внимания, не очень очевидная справка. потому и дал свой пример, а не послал RTFM ... ;)

кстати в IE этот пример дает один глюк, если зажать кнопку мыши, потянуть выделяя несколько "дивов" и отпустить.
исправляется довольно легко, т.что RTFM ;).

> sniknik © (05.06.10 10:46) [28]
> кстати в IE этот пример дает один глюк

я бы этот IE запретил :) Но пока еще есть мазохисты.

События в javascript Найти похожие ветки