0

Есть таблица, в которой при нажатии на строку показывается строка с доп.информацией, при повторном нажатии скрывается.

$('tr').click(function() {$(this).next().toggle()});

При одной таблице на странице работает. Добавил вторую таблицу и работает только на второй таблице. Понятно, что надо указать id таблицы, но никак не пойму как это сделать.

<div id="week_table"></div>

После идет выполнение JS

$.ajax({
  type: "POST",
  url: "ajax/ajax_arfs.php",
  data: "op=week_list",
  success: function(msg) {
    $("#week_table").html(msg);
   }
});

Строится 2 таблицы, т.е. в msg возвращается

<table id="current">
.............
</table>
<table id="week">
.............
</table>
7
  • Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. Вопросы без явного описания проблемы бесполезны для остальных посетителей. См. Как создать минимальный, полный, воспроизводимый пример.
    – Grundy
    29 дек 2015 в 14:11
  • вообще вы добавляете обработчик для всех строк, не важно в какой таблице они находятся, важно чтобы на момент выполнения этой строчки они уже были добавлены в DOM
    – Grundy
    29 дек 2015 в 14:31
  • @Grundy, спасибо, работает.
    – thecoder
    29 дек 2015 в 14:36
  • пожалуйста конечно :-D но я не понял чем именно помог :-) если у вас была проблема и вы ее решили, вы можете добавить свой собственный ответ с описанием решения
    – Grundy
    29 дек 2015 в 14:44
  • 1
    По возможности, опубликуйте найденное решение в ответе к вашему вопросу. Уверен, оно в будущем поможет многим вашим коллегам. 30 дек 2015 в 2:34

2 ответа 2

1

В вашем случае подойдет делегирование событий с помощью функции on. Суть этой функции заключается в том, что событие вешается на уже существующий элемент, обычно контейнер в котором лежат нужные элемента, и вторым параметром указывает от каких именно элементов обрабатывать событие.

Предположим, что

<div id="week_table"></div>

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

// вместо tr можно использовать более специфичный селектор, 
// например с указанием большей вложенности и/или классов, 
// но в данном случае хватит просто tr
$('#week_table').on('click', "tr",function(){ 
    $(this).next().toggle(); // this внутри функции будет указывать на tr по которому кликнули.
});

Данный код может располагаться либо в блоке ready

$(document).ready(function(){...});

Либо в теге скрипт, который объявлен после нужного дива.

Так же важно - данный код

$(this).next().toggle(); 

будет скрывать любую следующую строку, то есть, если в таблице три строки, то при клике на первую будет скрываться/показываться вторая, а при клике на вторую будет скрываться/показываться третья. Возможно стоит как-то отметить классом конкретную строку которую надо скрывать, но это не относится к сути вопроса о событиях.

2
  • спасибо большое за помощь, все работает отлично. Только еще вот вопрос. При клике показывается строка и если на нее кликнуть, то исчезает следующая строка, а она должна остаться. Т.е. можно ли как-то сделать чтобы при клике на появившуюся строку не было никаких действий?
    – thecoder
    30 дек 2015 в 6:56
  • @thecoder, об этом как раз последние абзацы, так как событие навешивается на все строки - то и работать будет со всеми. Проще всего в разметке которая возвращается с сервере пометить строки при клике на которые должно что-то случаться классом, например clickable, и немного изменить скрипт $('#week_table').on('click', "tr.clickable",function(){
    – Grundy
    30 дек 2015 в 7:00
0

@Grundy написал важную вещь, что

важно чтобы на момент выполнения этой строчки они уже были добавлены в DOM

Т.е. код $('tr').click(function() {$(this).next().toggle()}); для корректной работы должен выполнятся после того как на странице будут выведены все таблицы, в моем случаем этот код выполнялся после вывода одной таблицы, соответственно работало только на одной таблице.

4
  • можете поместить этот код в событие ready: $(document).ready(function(){$('tr').click(function() {$(this).next().toggle()});}) Тогда он выполнится когда DOM уже будет построен и все будет работать, если конечно таблицы не строятся динамически, например, по результатам ajax запроса
    – Grundy
    30 дек 2015 в 6:11
  • В том то и дело, что они строятся по ajax запросу
    – thecoder
    30 дек 2015 в 6:15
  • тогда покажите пример разметки, в вашем вопросе и как вы используете ajax, я могу подсказать как в вашем случае использовать делегирование событий jquery :-)
    – Grundy
    30 дек 2015 в 6:17
  • в вопрос, в комментариях код очень плохо выглядит:)
    – Grundy
    30 дек 2015 в 6:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.