Доступ к элементам которые были добавленны после формирования 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 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

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

	Доступ к элементам которые были добавленны после формирования DOM 10.05.2012, 20:55. Показов 3793. Ответов 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