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

@psash · Регистрация: 26.04.2012

Студворк — интернет-сервис помощи студентам

Такая тема, добавляю строки таблицы с помощью JQuery, но вот как их потом скрыть??? Как скрыть или изменить те элементы которые были созданы после формирования dom модели?

@borovik · 10.05.2012, 21:30

?

JavaScript
1
$('.newItem').find('tr').hide();

@psash · 10.05.2012, 22:01 **[ТС]**

Сообщение от borovik

?

JavaScript
1
$('.newItem').find('tr').hide();

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

@Nigepas · 10.05.2012, 22:03

Если вы их скрываете в обработчике какого-то события, то устанавливайте эти обработчики с помощью .live()

В данном случае например

JavaScript
1
2
3
$("tr").live("click", function(){
$(this).hide();
});

@psash · 10.05.2012, 22:09 **[ТС]**

Сообщение от Nigepas

Если вы их скрываете в обработчике какого-то события, то устанавливайте эти обработчики с помощью .live()

есть строка, а вней несколько элементов и вот нажав по одному из элементов, строка должна исчезнуть

@Nigepas · 10.05.2012, 22:22

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

А вообще и мой код сработает как надо, если вас устраивает, что строка скроется при любом клике внутри нее.

@psash · 11.05.2012, 21:52 **[ТС]**

Сообщение от Nigepas

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

А вообще и мой код сработает как надо, если вас устраивает, что строка скроется при любом клике внутри нее.

Завтра попробую, то что вы посоветовали.

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

@Nigepas · 11.05.2012, 21:59

Естественно, если вы вешаете обработчик на "удалить", а внутри него делаете $(this).hide(), то естественно у вас контекст this - это и есть "удалить", он и исчезает.
Я ж говорил

Вешайте обработчик на те элементы, на которые вам надо через live, а внутри него (т.е. внутри этого обработчика) находите и скрывайте текущую строку.

Т.е. найдите текущую tr относительно этого "удалить" и скрывайте ее.
Не видя html каскада, я не могу определить текущую (родительскую) строку tr.

Либо вешайте обработчик через live прямо на tr (тогда можно делать $(this).hide()). Должно тоже сработать. Но тогда это будет срабатывать также при любом клике внутри tr.

@psash · 11.05.2012, 22:08 **[ТС]**

Сообщение от Nigepas

Естественно, если вы вешаете обработчик на "удалить", а внутри него делаете $(this).hide(), то естественно у вас контекст this - это и есть "удалить", он и исчезает.
Я ж говорил
Т.е. найдите текущую tr относительно этого "удалить" и скрывайте ее.
Не видя html каскада, я не могу определить текущую (родительскую) строку tr.

Либо вешайте обработчик через live прямо на tr (тогда можно делать $(this).hide()). Должно тоже сработать. Но тогда это будет срабатывать также при любом клике внутри tr.

завтра попробую и отпишусь. спасибо

@psash · 13.05.2012, 11:18 **[ТС]**

в общем не получается у меня написать, что бы скрывалась строка, в которой по ссылке кликнули мышкой.

пробовал вот так:

код который добавляет строки::

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <tr class="str" id="'.$myrow['id'].'str">
    <td width="50" align="center" valign="top">'.$myrow['id'].'</td>  
    <td width="135" align="center" valign="top">
      <textarea name="html" id="html'.$myrow['id'].'" cols="45" rows="5">'.$myrow['html'].'</textarea>
      <div id="nax'.$myrow['id'].'" '.$nal.'</div>
     </td>
    <td width="128" align="center" valign="top">
    <div id="dop">
    <p><a href="'.$myrow['id'].'" id="'.$myrow['id'].'edit" class="edit">изменить</a></p>
    <p><a href="'.$myrow['id'].'" id="'.$myrow['id'].'del" class="del">удалить</a></p>
    <p>'.$pr.'</p>
    </div>
    </td>
  </tr>'

код который обрабатывает щелчок мышки::

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
$('.str').live('click',function()
{
var stroka = $(this);
 
$('.del').live('click',function()
    { 
var id = $(this).attr("id");
id = parseInt(id);
stroka.hide();
 
    })
return false;                             
})

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

нужно, что бы при клике по

HTML5
1
<a href="'.$myrow['id'].'" id="'.$myrow['id'].'del" class="del">удалить</a>

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

@Nigepas · 13.05.2012, 22:13

JavaScript
1
2
3
4
5
6
$(document).ready(function(){
    $('.del').live('click',function(){
        $(this).parents('.str').hide(); 
        return false;
    });
});

А если вам нужно не скрыть, а удалить строку, то вместо hide() используйте remove()

Определение id элемента (из вашего кода) я не включил в свой код, т.к. в задаче про это ничего не сказано. Если нужно - сами допишете, думаю))

@psash · 14.05.2012, 21:26 **[ТС]**

Сообщение от Nigepas

JavaScript
1
2
3
4
5
6
$(document).ready(function(){
    $('.del').live('click',function(){
        $(this).parents('.str').hide(); 
        return false;
    });
});

А если вам нужно не скрыть, а удалить строку, то вместо hide() используйте remove()

Определение id элемента (из вашего кода) я не включил в свой код, т.к. в задаче про это ничего не сказано. Если нужно - сами допишете, думаю))

спасибо. сегодня попробую

Добавлено через 12 часов 30 минут
ура... спасибо .. заработало

@psash · 20.05.2012, 12:12 **[ТС]**

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <tr class="str" id="'.$myrow['id'].'str">
    <td width="50" align="center" valign="top"><div id="number">''.$myrow['id'].'</div></td>  
    <td width="135" align="center" valign="top">
      <textarea name="html" id="html'.$myrow['id'].'" cols="45" rows="5">'.$myrow['html'].'</textarea>
      <div id="nax'.$myrow['id'].'" '.$nal.'</div>
     </td>
    <td width="128" align="center" valign="top">
    <div id="dop">
    <p><a href="'.$myrow['id'].'" id="'.$myrow['id'].'edit" class="edit">изменить</a></p>
    <p><a href="'.$myrow['id'].'" id="'.$myrow['id'].'del" class="del">удалить</a></p>
    <p><a href="'.$myrow['id'].'" id="'.$myrow['id'].'reg" class="del">смотреть</a></p>
    <p>'.$pr.'</p>
    </div>
    </td>
  </tr>'

ндо немного модифицировть код:
а как мне выбрать и скрыть элемент div id="number" при нажатии "смотреть"

@Nigepas · 20.05.2012, 12:24

Во-первых, сначала привести в порядок свой html:

Избавиться от нескольких элементов с одинаковым id (у вас id='number' в каждой строке). Нельзя иметь несколько одинаковых id на странице.
"удалить" и "смотреть" имеют одинаковый класс "del", думаю, логичнее сделать разные, тогда можно будет по классу определять - какое действие необходимо произвести.

Тогда и будем смотреть дальше...

@psash · 20.05.2012, 13:55 **[ТС]**

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<tr class="str" id="'.$myrow['id'].'str">
    <td width="50" align="center" valign="top"><div id="number">'.$myrow['id'].'</div></td>  
    <td width="135" align="center" valign="top">
      <textarea name="html" id="html'.$myrow['id'].'" cols="45" rows="5">'.$myrow['html'].'</textarea>
      <div id="nax'.$myrow['id'].'" '.$nal.'</div>
     </td>
    <td width="128" align="center" valign="top">
    <div id="dop">
    <p><a href="'.$myrow['id'].'" id="'.$myrow['id'].'edit" class="edit">изменить</a></p>
    <p><a href="'.$myrow['id'].'" id="'.$myrow['id'].'del" class="del">удалить</a></p>
    <p><a href="'.$myrow['id'].'" id="'.$myrow['id'].'reg" class="reg">смотреть</a></p>
    <p>'.$pr.'</p>
    </div>
    </td>
  </tr>'

там начало только с id, так они разные

@Nigepas · 20.05.2012, 14:00

А это

Сообщение от Nigepas

Избавиться от нескольких элементов с одинаковым id (у вас id='number' в каждой строке). Нельзя иметь несколько одинаковых id на странице.

Вам же нужно id="number" спрятать в текущей строке, насколько я понял.

...да и ошибка у вас в этом месте синтаксическая - 2 одинарные кавычки подряд...

<div id="number">''.$myrow['id'].'</div>

@psash · 20.05.2012, 14:05 **[ТС]**

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<tr class="str" id="'.$myrow['id'].'str">
    <td width="50" align="center" valign="top"><div id="number"'.$myrow['id'].'>'.$myrow['id'].'</div></td>  
    <td width="135" align="center" valign="top">
      <textarea name="html" id="html'.$myrow['id'].'" cols="45" rows="5">'.$myrow['html'].'</textarea>
      <div id="nax'.$myrow['id'].'" '.$nal.'</div>
     </td>
    <td width="128" align="center" valign="top">
    <div id="dop">
    <p><a href="'.$myrow['id'].'" id="'.$myrow['id'].'edit" class="edit">изменить</a></p>
    <p><a href="'.$myrow['id'].'" id="'.$myrow['id'].'del" class="del">удалить</a></p>
    <p><a href="'.$myrow['id'].'" id="'.$myrow['id'].'reg" class="reg">смотреть</a></p>
    <p>'.$pr.'</p>
    </div>
    </td>
  </tr>'

вроде так

@Nigepas · 20.05.2012, 15:12

Если $myrow['id'] - это число, то так id="'.$myrow['id'].'reg" нельзя!
id не может начинаться с цифры. Переделайте так, это важно:

PHP
1
2
3
    <p><a href="'.$myrow['id'].'" id="edit'.$myrow['id'].'" class="edit">изменить</a></p>
    <p><a href="'.$myrow['id'].'" id="del'.$myrow['id'].'" class="del">удалить</a></p>
    <p><a href="'.$myrow['id'].'" id="reg'.$myrow['id'].'" class="reg">смотреть</a></p>

Тогда:

JavaScript
1
2
3
4
5
6
    $('.reg').live('click',function(){              
        var curId = new Array();
        curId = $(this).attr('id').split('reg'); 
        $('#number' + curId[1]).hide();
        return false;
    });

И id="'.$myrow['id'].'str" переделайте так:

PHP
1
<tr class="str" id="str'.$myrow['id'].'">

Тогда и предыдущий код (по удалению строки tr) можно сделать аналогично:

JavaScript
1
2
3
4
5
6
7
    
    $('.del').live('click',function(){      
        var curId = new Array();
        curId = $(this).attr('id').split('del'); 
        $('#str' + curId[1]).hide();
        return false;
    });

@psash · 20.05.2012, 21:06 **[ТС]**

не может начинаться с цифры, а у меня все нормально работает...

Добавлено через 3 часа 37 минут
Завтра попробую и отпишусь. Спасибо

@psash · 22.05.2012, 20:19 **[ТС]**

все получилось. спасибо!

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

@psash 0 / 0 / 0 Регистрация: 26.04.2012 Сообщений: 19

	Доступ к элементам которые были добавленны после формирования DOM 10.05.2012, 20:55. Показов 3806. Ответов 19 Метки нет (Все метки) Такая тема, добавляю строки таблицы с помощью JQuery, но вот как их потом скрыть??? Как скрыть или изменить те элементы которые были созданы после формирования dom модели? 0

@Nigepas 40 / 40 / 14 Регистрация: 07.04.2012 Сообщений: 98
	10.05.2012, 22:22
	Вы тогда или пример html прилагайте и точно опишите - что надо сделать, по какому элементу кликать, чтоб.... А вообще по тому примеру что я написал вы можете и сами под свою таблицу подпилить. Вешайте обработчик на те элементы, на которые вам надо через live, а внутри его находите и скрывайте текущую строку. А вообще и мой код сработает как надо, если вас устраивает, что строка скроется при любом клике внутри нее. 0

@Nigepas 40 / 40 / 14 Регистрация: 07.04.2012 Сообщений: 98
	20.05.2012, 12:24
	Во-первых, сначала привести в порядок свой html: Избавиться от нескольких элементов с одинаковым id (у вас id='number' в каждой строке). Нельзя иметь несколько одинаковых id на странице. "удалить" и "смотреть" имеют одинаковый класс "del", думаю, логичнее сделать разные, тогда можно будет по классу определять - какое действие необходимо произвести. Тогда и будем смотреть дальше... 0

@psash 0 / 0 / 0 Регистрация: 26.04.2012 Сообщений: 19
	20.05.2012, 21:06 [ТС]
	не может начинаться с цифры, а у меня все нормально работает... Добавлено через 3 часа 37 минут Завтра попробую и отпишусь. Спасибо 0

@psash 0 / 0 / 0 Регистрация: 26.04.2012 Сообщений: 19
	22.05.2012, 20:19 [ТС]
	все получилось. спасибо! 0