There is a table

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

just below her input form

 <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');" />

The table and the form are static (i.e., there is when the page is loaded), the content is loaded into the table via XMLHttpRequest, and it looks like this - this is forum chat

 <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>

I want to implement so that when you click on the nickname <a href="http://phoenix-warriors.ru/index.php?action=profile;u=270" target="_blank" style="color:#ff009c">Mrak07</a> it was inserted into <input type="text" id="shoutbox_message"

I did so.

 $('#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(); });

It works fine with static content - https://jsfiddle.net/Reset5/j5qzt0uj/9/ but does not work on the forum.

PS at the forum jquery-1.10.1.min.js

PS2 I inserted an alert into the handler, but it doesn’t seem to see it either jquery does not see the event $('#shoutbox_table').on('click', 'a[target="_blank"]'

  • Delegate the event from document to element via .on() . learn.jquery.com/events/event-delegation - Sasha Omelchenko
  • I sort of delegated what is wrong? - Alexey Shatrov
  • one
    @AlexeyShatrov, your code is working. if it does not work for you, then most likely what you insert does not fit the selector a[target="_blank"] - Grundy
  • So guys, wrapped in $ (document) .ready (function () and everything smelled - I have a stupid question - why did I have to wrap? - Alexey Shatrov
  • one
    Elementary. You need to wait until DooM is ready and only then you can hang the handlers. - user207618

2 answers 2

  1. Add a class to nicks and do not worry. It's amazing that he is not there now.
  2. Then everything looks simpler:

 $(_ => { $('#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');" />

  • Added a class, for everyone, but without document ready - does not work. And this one that means :) $ (_ => - Alexey Shatrov
  • @AlexeyShatrov, this is a new type of function - arrows. In this case, you can read as $(function(){...}); . - user207618

Himself and answer - it was necessary to wrap in.

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

However, the advice - to add a class to nicks for ease of handling and conflict prevention turned out to be very useful, for which @Other thanks and a plus in turnips, like the rest of those who responded.