How do I use jQuery to redirect to a clicked TR in a dynamically-created table?

Question

I have jQuery code that works beautifully for clicking a row in a table that exists at page-load and getting redirected to a new page:

$(document).ready(function() {
 $("#myTable").on('click','tr',function() {
  var href = $(this).find("a").attr("href");
  if(href) 
  { window.location = href; } 
 }); 
});

I have a second table that gets generated by a jQuery POST and is added dynamically and I know it works because I can alert() myself when I click on a row of a dynamically-created table:

$(document).on('click', '#myDynamicTable tr', function(e) {
 var href = $(this).find("a").attr("href");
 alert(href); 
 });

Obviously, href is undefined. So what code can I use to replace the alert() line with an actual redirect to the link that's in that particular TR?

Update with HTML code: A sample HTML code that is returned via POST to the main page where the user clicks TRs:

<table id='myDynamicTable' border="1" cellspacing="0" cellpadding="10">
<tr><a href="http://address.com/page.php"></a><td>1</td></tr>
<tr><a href="http://address.com/page.php"></a><td>2</td></tr>
</table>

Again, the only difference between this dysfunctional table row clicking and other tables on the same page is the fact that myDynamicTable is generated dynamically via jQuery based on a search string put into an input type="Text" by the user.

I hope there is a `td` that holds that `a` right ? (a.k.a can we see the html + generated html) — drip, Oct 05 '14 at 21:31

score 0 · Accepted Answer · edited May 23 '17 at 12:27

0

If you just want to change the browser URL, just set window.location:

Presumably your have anchors inside TDs inside your TRs (you should show sample HTML too).

$(document).on('click', '#myDynamicTable tr', function(e) {
     var href = $(this).find("a").attr("href");
     window.location = href; 
 });

Technically you are meant to set window.location.href, but all browsers allow the shortcut. Javascript: Setting location.href versus location

edited May 23 '17 at 12:27

Community

1
1

answered Oct 05 '14 at 21:37

iCollect.it Ltd

92,391
25
181
202

Yes, that's all I'm trying to do. Unfortunately, using this code, href is "undefined." Any idea why it would be considered undefined? – Highdel Oct 05 '14 at 21:44
It would be easier to answer that question, and help, if we could see HTML. – David Thomas Oct 05 '14 at 21:54
Oh, and good point! Yes, each row inside my `` table is of the structure: `` This works perfectly for existing tables that exist at time of page-loading, just not for tables that are generated dynamically for some reason..
– Highdel Oct 05 '14 at 21:57
I updated the original post to show the HTML that gets inserted into the page dynamically. – Highdel Oct 05 '14 at 22:01
WOW. Weird how it works one way for existing tables and another way for dynamic ones! Simply moving the `` tag inside of the `` tag makes all the difference. Thank you, guys! – Highdel Oct 05 '14 at 22:09

Harutyun Abgaryan · Answer 2 · 2014-10-05T22:06:59.623

0

User This

    <table id='myDynamicTable'>
        <tr>
            <td>
                <a href="google.com">redirect to</a>
            </td>
        </tr>

your jquery code is true

 $(document).on('click', '#myDynamicTable tr', function(e) {
 var href = $(this).find("a").attr("href");

    window.location=href;
 });

edited Oct 05 '14 at 22:06

answered Oct 05 '14 at 21:38

Harutyun Abgaryan

2,013
1
12
15

That's exactly what I'm doing, but when I alert(href), it just tells me it's undefined. I've double- and triple-checked for typos, but there are none. Any other ideas? The table is generated dynamically, if that helps. – Highdel Oct 05 '14 at 21:42
Yes. That code works perfectly on a statically-defined table that exists when the page is loaded, but it's not working for my dynamically-generated table that is generated based on user interaction with the page. Is there something special you have to do/include when working with dynamic content? I cannot help but notice that when I view the page source, the dynamic table is not shown even though it's on my screen. – Highdel Oct 05 '14 at 21:47
$(document).on('click', '#myDynamicTable tr', function(e) {}) this function for dinamic created element in dom but $('#myDynamicTable ').click() this function for static element, plesae send me your html in after loade page inspect element ok? – Harutyun Abgaryan Oct 05 '14 at 21:49
That's three times you've given me the same code... that I've already tried... that doesn't work. But thank you for your help! :) – Highdel Oct 05 '14 at 21:53
So, in order for it to work properly, the anchor tags must be placed inside of the `` instead of the ``, then? – Highdel Oct 05 '14 at 22:04

How do I use jQuery to redirect to a clicked TR in a dynamically-created table?

2 Answers2