Главная страница
Top.Mail.Ru    Яндекс.Метрика
Текущий архив: 2010.08.27;
Скачать: CL | DM;

Вниз

События в 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;
событие "теряется"


 
sniknik ©   (2010-06-05 00:20) [22]

> потому что таблицу-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>


 
xayam ©   (2010-06-05 00:41) [23]


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

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


 
sniknik ©   (2010-06-05 01:00) [24]

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


 
xayam ©   (2010-06-05 01:22) [25]


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

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


 
Германн ©   (2010-06-05 02:01) [26]


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

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


 
sniknik ©   (2010-06-05 09:34) [27]

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


 
sniknik ©   (2010-06-05 10:46) [28]

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


 
xayam ©   (2010-06-06 00:43) [29]


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

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



Страницы: 1 вся ветка

Текущий архив: 2010.08.27;
Скачать: CL | DM;

Наверх




Память: 0.55 MB
Время: 0.062 c
3-1240631464
ddd329
2009-04-25 07:51
2010.08.27
Объединение записей


2-1273619311
NasdaqPredictor
2010-05-12 03:08
2010.08.27
О написании собственной DLL


2-1267694499
DenProx
2010-03-04 12:21
2010.08.27
Фильтрация связаных таблиц


2-1274855695
Rembo
2010-05-26 10:34
2010.08.27
Картинку из файла уменьшить и поместить в tbitmap


15-1270539779
Игорь
2010-04-06 11:42
2010.08.27
Yandex Деньги через SMS