Adding click event from jquery .class[data-attribute='value'] selector

Question

I am working on a project where I am creating a 3 dot menu and want to add a click handler to.

I have the following HTML

<td z-var="ExceptionGroup @data-exception-group, CrashType @data-crash-type" data-exception-group="" data-crash-type="" class="context-menu" data-container-id="crash_group_menu"></td>

The above TD has the class context-menu which is as follows in CSS:

.context-menu:after
{
    content: '\2807';
    font-size: 20px;
    cursor: pointer;
    cursor: hand;
}

I've then tried the following jquery to select the 3 dot item and set a click event on it:

$('.context-menu[data-container-id="crash_group_menu"]').click(function(){
        alert("hello");
    });

The click event never gets fired but there is no javascript error in the develop console.

I've also tried the following:

$('.context-menu[data-container-id="crash_group_menu"]:after').click(function(){
        alert("hello");
    });

(Notice I've added :after to the data-attribute selector) but no joy.

I've done this before when using div containers, is this not possible with class and data attribute selection or am I missing something somewhere?

Possible duplicate of [Only detect click event on pseudo-element](https://stackoverflow.com/questions/7478336/only-detect-click-event-on-pseudo-element) — Sterling Archer, Nov 28 '17 at 21:34
Working in pure HTML : https://jsfiddle.net/06jx2n9r/ . Is your in DOM on page load ? — Vincent Decaux, Nov 28 '17 at 21:36
I think I am being a numpty. The table is populated in the document.ready after an API call, I think the click event is being created before the table has been populated — Boardy, Nov 28 '17 at 21:44

score 1 · Accepted Answer · answered Dec 13 '17 at 16:25

I said this in the comment but for others who may have had something similar.

The problem was the table was being populated dynamically via an API call. This then meant that I was attempting to add the click handler before the table was populated.

I got round this by using javascript promises.

I return a promise for populating the table, once the promise has been completed successfully, I then create the click handler as needed.

Adding click event from jquery .class[data-attribute='value'] selector

1 Answers1