Добавьте атрибут data-id для ссылки внутри всплывающего элемента начальной загрузки.

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

введите здесь описание изображения

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

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

Я попытался сохранить идентификатор друга во всплывающем окне в атрибуте data-id. Однако он появляется только на элементе, который вызывает всплывающее окно, а не на самом всплывающем окне. Вот что я имею в виду ниже:

Мой код:

введите здесь описание изображения

Как это выглядит на странице (инструменты Chrome dev):

введите здесь описание изображения

Как видите, атрибут data-id появляется как часть атрибута data-content всплывающего окна. Однако фактическое всплывающее окно не будет включать этот атрибут data-id, даже если он включает другие атрибуты (href, class).

введите здесь описание изображения

Как я могу получить эту информацию по ссылке «сообщение» во всплывающем окне?


person Kevin Sun    schedule 14.06.2020    source источник


Ответы (1)


Хотя я не смог найти решения для этого (возможно, потому, что загрузчик не поддерживает добавление атрибутов «data-id» к атрибуту «data-content» всплывающего окна), я нашел очень простой обходной путь.

Вы можете добавить div с идентификатором, установленным на все, что вы хотите, и это не повлияет на отображение, но будет иметь атрибут id, который вы можете получить с помощью javascript.

<div class="user-info user-image chat_user loadChatroom friend-view" data-toggle="popover" data-placement="top" 
              data-content="<div class='hidden-friend-id' id='<%= friend.id %>'></div> <a href='/view-profile/<%= friend.id %>'>View profile</a><br/> <a href='' class='message-friend' data-id='<%= friend.id %>'>Message</a>">

person Kevin Sun    schedule 15.06.2020