Question

是否可以将jquery filter方法绑定到尚不存在的元素？我有一个在页面加载之前没有构建的表，以及一个应该过滤掉行的表行搜索。由于还可以添加和删除表行，因此我需要能够预先绑定方法处理程序。实施例

class ElementSearch {

    constructor($input, $elementClass){
        let self = this;
        this.$input = $input;
        this.$elementClass = $elementClass;
        this.$input.on('input', function(){
            self.filterElements($(this).val());
        });

        return this;
    }

    /**
     * Hide or show elements according to the search string
     * @param {string} search 
     * @return ElementSearch
     */
    filterElements(search){
        search = search.toLowerCase();
        let self = this;
        this.$elementClass.filter(function(){ 
            let $this = $(this);
            if($this.text().toLowerCase().indexOf(search) > -1){
                $this.fadeIn();
            }
            else {
                $this.fadeOut();
            }
        });
        return this;
    }
}

在我的App我创建ElementSearch之前，甚至在定义或构建表之前。所以我试试这个

this.elementSearch = new ElementSearch($input, $('body table tbody tr'));

希望它会在所有filter元素上调用tr，即使它们尚不存在。这不起作用（this.$elementsClass length = 0）但是如果我在构建表之后设置它，它就可以工作。

有没有办法做到这一点？

Answer 1

您想要探索事件委派Jquery Article。

这是将事件处理程序附加到静态父元素的位置。当事件冒泡到静态父级时，处理程序会检查它是否发生在目标子元素上，如果为true则触发。

您的代码示例很难将其映射出来，因为我无法看到您的HTML结构。但是使用委托就是如何保证动态元素由事件绑定不活动的事件处理。

将jquery过滤器绑定到不存在的元素

1 个答案: