如何将 Jquery 滚动事件绑定到动态添加的元素？

Question

我正在创建一个 Ember 组件，我需要将滚动事件绑定到一个动态创建的 div。

我的车把代码如下所示：

<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>

设置逻辑，以便根据在此输入部分中输入的内容，将 searchKeyNotNull 更新为“true”或“false”，noResults 也是如此。

当它现在运行时，div searchResultsContainer 将填充包含结果的 div，并且有一个最大高度。我还启用了溢出，因此用户可以滚动查看结果。

我需要将一个滚动事件绑定到这个 div，这样当它到达末尾时，就会触发一个动作。

现在，这是我开始使用的事件代码：

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

哪个有效。不幸的是，当这个 sn-p 运行时，div 还没有被创建，所以这个事件永远不会被绑定。我也尝试过使用jQuery.on函数，但是好像scroll没有冒泡，所以

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

不起作用。

我无计可施，试图找到解决方法；我需要： a）找到一种方法将滚动绑定到动态添加的元素，或者 b) 找出 Ember 何时创建元素，以便我可以立即插入此绑定代码。

解决这两个问题的解决方案对我有很大帮助！

Answer 1

我多次反驳这个问题。我发现隐藏元素而不是将其放置在 if 块中最简单。

你可以通过扩展你的绑定属性来做到这一点

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

hidden 在哪里是一个将display 设置为none 的类。 这将导致元素只渲染一次，允许您像这样使用didInsertElement 钩子：

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

在您的组件中。

我使用bind-attr 隐藏元素（而不是不渲染它！）的原因是每次searchKeyNotNull 更改时，ember 都会创建一个新元素。 didInsertElement 钩子只会触发一次。

Answer 2

scroll、load、error 事件没有冒泡（参见：https://developer.mozilla.org/en-US/docs/Web/Events/scroll），因此您必须在添加可滚动元素时更新处理程序。

Answer 3

大多数时候，有一种方法可以使用 Ember 视图挂钩、操作和事件来完成您通常在 jQuery 中执行的操作。

另一种方法是将该 DOM 节点包装在 {{#view}} 中，然后使用 didInsertElement 挂钩。比如我们把它包裹在{{#view App.SearchResultsView}}：

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

    {{#if searchKeyNotNull}}
      {{#view App.SearchResultsView}}
        <div class="searchResultsContainer box-shadow">
          <!-- MORE HBS HERE -->
        </div>
      {{/view}}
    {{/if}}
</div>

现在，让我们定义App.SearchResultsView：

App.SearchResultsView = Ember.View.extend({
  didInsertElement: function () {
    this.$('.searchResultsContainer').on('scroll', function (e) {
      // scrolling...
    });
  }
});

希望对您有所帮助！让我知道是否可以进一步解释。