1

Есть таблица

<table id="shoutbox_table" cellspacing="0" cellpadding="2" border="0">
    <tr id="shoutbox_msgs"><td></td></tr>
</table>

чуть ниже нее форма ввода

<input type="text" id="shoutbox_message" style="text-decoration:underline;padding:2px 0;width:90%" onkeypress="var k = window.event ? event.keyCode : event.which; if (k == 13) Shoutbox_SentMsg('22d0963fed98aac17f50112871dd7e81');" />

Таблица и форма статичные (т.е. есть при загрузке страницы), контент в таблицу подгружается через XMLHttpRequest, и выглядит так - это чат на форуме

<table id="shoutbox_table" cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr id="shoutbox_row43"><td nowrap="nowrap" style="text-align:right" class="smalltext" valign="top"><a href="http://phoenix-warriors.ru/index.php?action=profile;u=270" target="_blank" style="color:#ff009c">Mrak07</a> <span style="color:#FFFFFF">[22 Фев 08:05]</span>:</td><td style="text-align:left" class="smalltext" valign="top"><span style="">4 день донатная рарка(</span></td></tr>
<tr id="shoutbox_row44"><td nowrap="nowrap" style="text-align:right" class="smalltext" valign="top"><a href="http://phoenix-warriors.ru/index.php?action=profile;u=270" target="_blank" style="color:#ff009c">Mrak07</a> <span style="color:#FFFFFF">[22 Фев 08:55]</span>:</td><td style="text-align:left" class="smalltext" valign="top"><span style=""><a href="http://berserktcg.ru/?gift=fb515520-1fb5-473f-8ff8-edb83a4855b2" target="_blank">http://berserktcg.ru/?gift=fb515520-1fb5-473f-8ff8-edb83a4855b2</a></span></td></tr>
<tr id="shoutbox_row45"><td nowrap="nowrap" style="text-align:right" class="smalltext" valign="top"><a href="http://phoenix-warriors.ru/index.php?action=profile;u=270" target="_blank" style="color:#ff009c">Mrak07</a> <span style="color:#FFFFFF">[22 Фев 09:12]</span>:</td><td style="text-align:left" class="smalltext" valign="top"><span style="">играю телохранами сливаюсь от всех подряд</span></td></tr>
<tr id="shoutbox_row46"><td nowrap="nowrap" style="text-align:right" class="smalltext" valign="top"><a href="http://phoenix-warriors.ru/index.php?action=profile;u=525" target="_blank" style="color:#00AC14;">Безуминка</a> <span style="color:#FFFFFF">[22 Фев 09:17]</span>:</td><td style="text-align:left" class="smalltext" valign="top"><span style="">привет всем</span></td></tr>
<tr id="shoutbox_msgs"></tr>
</tbody></table>

Я хочу реализовать чтобы, при чтобы при клике по нику <a href="http://phoenix-warriors.ru/index.php?action=profile;u=270" target="_blank" style="color:#ff009c">Mrak07</a> он вставлялся в <input type="text" id="shoutbox_message"

Я сделал так.

$('#shoutbox_table').on('click', 'a[target="_blank"]', function(event){
event.preventDefault();
var sayto=$(this).text();
$("#shoutbox_message").val("["+sayto+"], "+$("#shoutbox_message").val());
    $("#shoutbox_message").focus();
});

Оно отлично работает при статическом контенте - https://jsfiddle.net/Reset5/j5qzt0uj/9/ но не работает на форуме

P.S. у форума jquery-1.10.1.min.js

P.S.2 Я вставлял в обработчик alert, но похоже и его не видит, т.е. jquery не видит событие $('#shoutbox_table').on('click', 'a[target="_blank"]'

7
  • делегируйте событие от документа к элементу через .on(). learn.jquery.com/events/event-delegation 22 фев 2017 в 18:25
  • Я ж вроде делегировал, что не так? 22 фев 2017 в 18:35
  • 1
    @AlexeyShatrov, твой код - рабочий. если он у тебя не работает, то скорее всего то, что ты вставляешь не подходит под селектор a[target="_blank"]
    – Grundy
    22 фев 2017 в 18:38
  • Так ребят, обернул в $(document).ready(function() и все запахало - у меня тупой вопрос - почему нужно было обернуть? 22 фев 2017 в 18:45
  • 1
    Элементарно же. Нужно дождаться когда DooM будет готов и только тогда можно повесить обработчики.
    – user207618
    22 фев 2017 в 18:51

2 ответа 2

2
  1. Добавьте класс к никам и не парьтесь. Удивительно что его сейчас нет.
  2. Тогда всё выглядит проще:

$(_ => {
  $('#shoutbox_table').on('click', '.nickName', function(e){
    $('#shoutbox_message').val(this.innerHTML + ', ').focus();
  });
});
.nickName{
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table id="shoutbox_table" cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr id="shoutbox_row43"><td nowrap="nowrap" style="text-align:right" class="smalltext" valign="top"><a href="http://phoenix-warriors.ru/index.php?action=profile;u=270" target="_blank" style="color:#ff009c" class='nickName'>Mrak07</a> <span style="color:#FFFFFF">[22 Фев 08:05]</span>:</td><td style="text-align:left" class="smalltext" valign="top"><span style="">4 день донатная рарка(</span></td></tr>
<tr id="shoutbox_row44"><td nowrap="nowrap" style="text-align:right" class="smalltext" valign="top"><a href="http://phoenix-warriors.ru/index.php?action=profile;u=270" target="_blank" style="color:#ff009c" class='nickName'>Mrak07</a> <span style="color:#FFFFFF">[22 Фев 08:55]</span>:</td><td style="text-align:left" class="smalltext" valign="top"><span style=""><a href="http://berserktcg.ru/?gift=fb515520-1fb5-473f-8ff8-edb83a4855b2" target="_blank">http://berserktcg.ru/?gift=fb515520-1fb5-473f-8ff8-edb83a4855b2</a></span></td></tr>
<tr id="shoutbox_row45"><td nowrap="nowrap" style="text-align:right" class="smalltext" valign="top"><a href="http://phoenix-warriors.ru/index.php?action=profile;u=270" target="_blank" style="color:#ff009c" class='nickName'>Mrak07</a> <span style="color:#FFFFFF">[22 Фев 09:12]</span>:</td><td style="text-align:left" class="smalltext" valign="top"><span style="">играю телохранами сливаюсь от всех подряд</span></td></tr>
<tr id="shoutbox_row46"><td nowrap="nowrap" style="text-align:right" class="smalltext" valign="top"><a href="http://phoenix-warriors.ru/index.php?action=profile;u=525" target="_blank" style="color:#00AC14;" class='nickName'>Безуминка</a> <span style="color:#FFFFFF">[22 Фев 09:17]</span>:</td><td style="text-align:left" class="smalltext" valign="top"><span style="">привет всем</span></td></tr>
<tr id="shoutbox_msgs"></tr>
</tbody></table>
<input type="text" id="shoutbox_message" style="text-decoration:underline;padding:2px 0;width:90%" onkeypress="var k = window.event ? event.keyCode : event.which; if (k == 13) Shoutbox_SentMsg('22d0963fed98aac17f50112871dd7e81');" />

2
  • Добавил класс, на всякий, но без document ready - не работает. И Вот эта закорлючка что значит :) $(_ => 22 фев 2017 в 18:47
  • @AlexeyShatrov, это новый тип функций - стрелки. В данном случае можно читать как $(function(){...});.
    – user207618
    22 фев 2017 в 18:50
2

Сам и отвечаю - нужно было обернуть в .

$(document).ready(function() {
$('#shoutbox_table').on('click', '.nickName', function(event){
   event.preventDefault();
   var sayto=$(this).text();
   $("#shoutbox_message").val("["+sayto+"], "+$("#shoutbox_message").val());
});
});

Однако совет - добавить класс к никам для простоты обращения и предупреждения конфликтов оказался весьма полезным, за что @Other благодарность и плюс в репу, как и остальным откликнувшимся.

Ваш ответ

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

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