CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Osman Esen
Osman Esen

Reputation: 1696

Scroll function issue in JavaScript

I'm new to frond end development, and unfortunately have some issues calling a JavaScript function.

I have following function: 

 <script type="text/javascript">
    $(document).ready(function () {

        $("#table_div").scroll(function () {
            alert("test successful");
            jQuery('#divHeader').scrollLeft(jQuery('#table_div').scrollLeft());
            jQuery('#firstcol').scrollTop(jQuery('#table_div').scrollTop());
            jQuery('#lastcol').scrollTop(jQuery('#table_div').scrollTop());
        });
    });
</script>

and HTML is defined as: 

<div id="divHeader" class="firstpanel">

<div id="firstcol" class="firstcolumn">

<div id="table_div" class="contentpanel">

which is styled as: 

.contentpanel {
   overflow: scroll;
   width: 300px;
   height: 500px;
   position: relative;
 }

 .firstpanel {
   overflow: hidden;
   width: 284px;
 }

 .firstcolumn {
   overflow: hidden;
   height: 500px;
 }

and I'm experiencing a problem, since the "alert" in my JavaScript function is not triggered, when I debug my application. I have made a test in JSFiddle with exacly the same code, and it works very well, since the alert function is called, once I start scrolling my div.

I'm using JQuery 1.5.1 in my application and will prefer to prevent using a newer version in JQuery. Is the JQuery version the issue in this case ?.

Upvotes: 0

Views: 55

Answers (1)

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

You are attaching the event when the element is not render by DOM. You should wrap that code in a $(document).ready() or use delegation events:

$(document).on('scroll', "#table_div", function () {
   // code 
});

Upvotes: 1

Related Questions