How to bind a Jquery scroll event to a dynamically added element?

Question

I am creating an Ember Component, and I need to bind the scroll event to a div that is dynamically created.

My handlebars code looks like this:

<div class="searchbarContainer" tabindex="0" bubbles=false>
    {{input type="search" name="searchFor" class="searchTextField" placeholder="Search..." value=searchKey}}

    {{#if searchKeyNotNull}}
    <div class="searchResultsContainer box-shadow" {{bind-attr id="searchBarID"}}>
        {{!-- BINDS ID TO searchBarID for searchResultsContainer--}}
            {{#if noResults}} {{!-- Then say : "No Results. " --}}
                      <div class="applicantsName noResults">
                        No Results found.
                      </div>      
            {{else}}
                {{!-- For each Row, include visual elements. --}} 
                {{#each toSearch }}
                    <div> ... </div>
                {{/each}}
            <div class='endOfResults'>
                End of Results
            </div> 
            {{/if}}
    </div>
    {{/if}}
</div>

The logic is set so that according to what is entered in the input part of this, searchKeyNotNull is updated to 'true' or 'false', as is noResults.

As it functions now, the div searchResultsContainer becomes populated with divs that contain the results, and there is a max height. I have also enabled overflow, so the user can scroll through the results.

I need to bind a scroll event to this div so that when it reaches the end, an action is fired.

Now, here's the event code I started with:

        $('#searchBarID').bind('scroll',function(){
        if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
        {
          alert('end reached');
        }
      });

Which works. Unfortunately, when this snippet is run, the div has not been created yet, so this event is never bound. I also tried to use the jQuery.on function, but it seems that scroll doesn't bubble, so

        $('body').on('scroll','#searchBarID', function(){
        if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
        {
          alert('end reached');
        }
      });

does not work.

I am at my wit's end trying to find a workaround for this; I need to either: a) find a way to bind scroll to a dynamically added element, or b) find out when Ember creates elements so I can insert this bind code right then.

A solution that does either of these two would help me greatly!

Answer 1

I countered this issue a couple of times. I find it easiest hiding the element instead of placing it an a if block.

You could do so by using expanding your bind-attr

<div class="searchResultsContainer box-shadow" {{bind-attr id="searchBarID" class="searchKeyNotNull::hidden"}}>

Where is hidden is a class that will set the display to none. This will cause the element to renderd only once, will allows you to use the didInsertElement hook like so:

onDidInsert: function () {
    var element = $('#searchBarID', this.$());
    element.on('scroll', function () {
        // your impl.
    })
}.on('didInsertElement')

in your component.

The reason I use the bind-attr to hide the element (instead of not rendering it!) is because ember will create a new element every time the searchKeyNotNull changes. The didInsertElement hook will only trigger once however.