How to make dynamically created table rows clickable

Question

This is the table that should display my search result:

<table id="searchbarresults">

</table>

This is my javascript:

 jQuery(document).ready(function(){
jQuery("#searchresults").keyup(function(){

 for(i=0;i<searchbarresultarray.length;i++){

           htmloutput= htmloutput+"<tr><td class='searchbarresult' id='"+i+"'>"result"</td></tr>";

            }
    jQuery("#searchresults").html(htmloutput);

});

jQuery(".searchbarresult").mouseover(function(){
      jQuery(this).css( "background-color", "black" ); 
    });
});

This outputs a list with table rows. All with class 'searchbarresult' and a unique id. But it does not work. Is it because the table rows are created after the mouseover event is hooked? And how can i go around this?

stackoverflow.com/questions/1359018/…

Andriy Lozynskiy
– Andriy Lozynskiy

2018-02-18 09:08:44 +00:00
Commented Feb 18, 2018 at 9:08 — Andriy Lozynskiy
– Andriy Lozynskiy, Commented Feb 18, 2018 at 9:08

Inus Saha · Accepted Answer · 2018-02-18 09:10:54Z

3

try

jQuery(document).on('mouseover','.searchbarresult',function(){
    jQuery(this).css( "background-color", "black" ); 
});

answered Feb 18, 2018 at 9:10

Inus Saha

1,93814 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JeffreyR Over a year ago

Can you explain to me why this works and the other does not? I use my version all the time with code that is not dynamically generated.

Inus Saha Over a year ago

your one does not work because the element gets added after the event handler is added. this way it will work even if element is added after the event handler is attached.

TanvirArjel · Accepted Answer · 2018-02-18 09:15:30Z

1

To make table row clickable add onclick="window.location='#';" to the tr element as follows:

 jQuery(document).ready(function(){
    jQuery("#searchresults").keyup(function(){

     for(i=0;i<searchbarresultarray.length;i++){

               htmloutput= htmloutput+"<tr onclick="window.location='#';"><td class='searchbarresult' id='"+i+"'>"result"</td></tr>";

                }
        jQuery("#searchresults").html(htmloutput);

    });

    jQuery(document).on('mouseover','.searchbarresult',function(){
        jQuery(this).css( "background-color", "black" ); 
     });
    });

answered Feb 18, 2018 at 9:15

TanvirArjel

32.4k14 gold badges89 silver badges120 bronze badges

Collectives™ on Stack Overflow

How to make dynamically created table rows clickable

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related