jQuery on event not working for future selectors

Question

I have a modal window. Inside it there is a table with id WebPartWPQ2 which will have three different classes in three different states. The classes being ms-applyfiltersinactive, ms-applyfiltersactive and ms-applyfiltershoverover. Initially, when the modal window pops up, the table will have ms-applyfiltersinactive class. Only on change of an option in the select box inside it, the class of the table changes to ms-applyfiltersactive and then on mouse hover the class changes to ms-applyfiltershoverover. On closing the window, the class of the table resets to ms-applyfiltersinactive.

The requirement is that I need to have a click event on the table only when it is active i.e. has a class ms-applyfiltersactive or ms-applyfiltershoverover.

I am using

$(document).on("click","#WebPartWPQ2 .ms-applyfiltersactive, #WebPartWPQ2 .ms-applyfiltershoverover", function(){
    alert("Clicked");
});

This fails to attach the click event to the table. This might be because the class of the table then is ms-applyfiltersinactive.

If I use the following code

$(document).on("click","#WebPartWPQ2 table[class*='ms-applyfilter']", function(){
    alert("Clicked again");
});

the event is fired in all the three cases, which I do not want.

I have tried to filter out the selectors using hasClass and is events.

$(document).on("click","#WebPartWPQ2 table[class*='ms-applyfilter']", function(){
    alert($(this).is("table.ms-applyfiltersactive"));
});

But this returns the same boolean when the table has any class.

Please help me out with this.

We cannot help you if we don't know the HTML. A http://jsfiddle.net/ demo would be most helpful. If the selector does not work, it probably means that there are no elements with class `.ms-applyfiltersactive`. Since the event handler is bound to the `document`, it does not matter what classes the elements you want to listen on have at the time you bind the handler. — Felix Kling, Dec 27 '12 at 12:53

score 0 · Answer 1 · answered Dec 27 '12 at 16:36

Without the HTML, I cannot use your current code. However, I've created an example that should help.

I would suggest doing the following:

JAVASCRIPT:

$(document).on("click","#WebPartWPQ2", function(){
    switch($("#WebPartWPQ2").attr("class")){
        case 'ms-applyfiltersinactive':
            //do something
            break;
        case 'ms-applyfiltersactive':
            //do something
            break;
        case 'ms-applyfiltershoverover':
            //do something
            break;    
    }
});

DEMO: http://jsfiddle.net/PKWKn/11/

Hope this helps!

jQuery on event not working for future selectors

1 Answers1