Bind jquery filter to non-existing elements

Question

Is it possible to bind a jquery filter method to elements that don't exist yet? I have a table that is not built before page load, and a table row search that is supposed to filter out rows. Since table rows can also be added and removed, I need to be able to pre-bind the method handler. Example

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

In my App I create ElementSearch before the table is even defined or built. So I try this

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

Hoping that it will call filter on all tr elements even though they don't yet exist. This doesn't work (this.$elementsClass length = 0) but if I then set it after the table is built, it works.

Is there any way to do this?

filter, no, because it isn't an event. You can however delegate the event that causes the filter to occur. — Kevin B, Jan 11 '18 at 22:08
i think there are roughly 50 posts on stack overflow about event handlers for dynamic elements with jquery. are you sure you searched for it and couldn't find [one](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) or [two](https://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements)? — Sagiv b.g, Jan 11 '18 at 22:16

score 2 · Answer 1 · answered Jan 11 '18 at 22:14

2

You want to explore event delegation Jquery Article.

This is where you attach an event handler to a static parent element. When an event bubbles up to the static parent the handler checks to see whether it occurred on a target child element and fires if true.

It's hard from your code example to map this out as I can't see the structure of your html. But using delegation is how you can guarantee dynamic elements are handled by an event where event binding isn't 'live'.

answered Jan 11 '18 at 22:14

Drongo

89
6

The HTML structure would result in a table. `...` However the table does not even exist yet.
– J Doe. Jan 12 '18 at 13:30
You can either wrap the table in a div or apply the event handler to some static parent. In theory it could be the body tag (tho better to apply it as close to the target element as possible). Events bubble all the way from whatever target element was clicked right up to the root. – Drongo Jan 13 '18 at 07:17

Bind jquery filter to non-existing elements

1 Answers1