Question

I am using a telerik grid control, which displays a grid with some other functionality, paging, sorting, filtering etc.

When the filter button is clicked on the grid, it ‘pops up’ the filter dialog. Which specifically, is a div with an input and button controls.

I want to bind to the click of the filter button control. The problem is that the filter dialog ‘pops up’ and this seems to be done dynamically, so the element is not present when $(document).ready() is called. It also is not given an id but i’m hoping I can get it from its class.

I’ve read this article, except since I believe it is in the telerik code it makes it harder to modify…
http://www.learningjquery.com/2008/05/working-with-events-part-2

It was also suggested to use live() and bind like that – but it doesn’t seem to pick up the control either…

Any ideas on how I can bind to the click of this button?

Since the filter uses ajax I also tried binding to the ajaxSend but I’d need a way to find out inside the ajaxSend binding what had caused it, or what control made it happen…I wasn’t sure how to do this.

Thanks.

---

Using jquery 1.4.4

Update with the code

$(".t-button.t-button-icontext.t-filter-button").live("click", function () {
                    alert('got it');
                });



    <div class="t-filter-help-text">And</div>
        <select class="t-filter-operator">
            <option value="endswith">Ends with</option>
            <option value="eq">Is equal to</option>
            <option value="ne">Is not equal to</option>
            <option value="startswith">Starts with</option>
            <option value="substringof">Contains</option>
        </select>
        <input type="text">
        <button class="t-button t-button-icontext t-filter-button">
            <span class="t-icon t-filter"></span>Filter
        </button>
    </div>

I am pretty sure the selectors are not a problem, because I’ve checked with .length, behind a static button the page and in the jquery document ready. in the jquery document ready of course it results 0. after clicking the filter and making the dynamic content available, and clicking the button, receiving 1.

---

I have worked out why it isn’t working. In the telerik code which generates the dialog, there is a stopPropagation() call. If I remove that, the filter dialog becomes unusable (clicking anywhere closes it). In this case, I am not sure there is a solution to this problem.

Answer 1

I ended up solving this by using Brandon Aaron’s liveQuery plug in, which allows the events to propagate up even if .stopPropagation() has been called, and allows me to successfully retain the functionality of the filter dialog.

See http://blog.bigbinary.com/2009/10/14/how-live-method-works-in-jquery-why-it-does-not-work-in-some-cases-when-to-use-livequery.html for a detailed explanation.