CODEWITHSUNDEEP
jquery
JeffreyR
JeffreyR

Reputation: 591

How to make dynamically created table rows clickable

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?

Upvotes: 1

Views: 406

Answers (2)

TanvirArjel
TanvirArjel

Reputation: 32059

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" ); 
     });
    });

Upvotes: 1

Inus Saha
Inus Saha

Reputation: 1918

try

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

Upvotes: 3

Related Questions