Button event isn't triggered (working w/ dynamically created classes)

Question

I have three plus (+) buttons next to three separate tables (built with DataTables). Since the pluses were created in one location (with DT), they're assigned the same classes and clicking on any of them opens the same modals.

I dynamically added classes to each of the pluses in order to add specificity. I'm trying to trigger an onClick event for the first +, but for some reason it's not working.

Here's my question: Why isn't my onClick event triggered? Do I have to add more specificity? Is the problem with where the button was created? (see code below)

Button creation

loadDataTable(_payload, _grid, _def) {
...
var table = $(_grid).DataTable({
            data: _payload,
...
buttons: [
            {
              text:      '<i class="fa fa-plus"></i>',
              titleAttr: 'Add',
              className: 'dtAddClass btn' + _grid                
            },

// this creates:
// btn 1: class="btn btn-default dtAddClass btn.rolesgrid"
// btn 2: class="btn btn-default dtAddClass btn.srchgrid"
// btn 3: class="btn btn-default dtAddClass btn.additionalsrchgrid"
// this is exactly what I want

onClick event:

$(document).on("click", ".btn.rolesgrid", disp._newRole); // this does not open the modal

$(document).on("click", ".dtAddClass, .btn.rolesgrid", disp._newRole); // this triggers all of the pluses to open modals, which I don't want. I'm guessing it has to do with the .dtAddClass

Method:

_newRole(e) {
        dialog.dialog({ title: "Add New Search/Role Filled" });
        dialog.dialog("open");

        console.log('this is e: ' + e)
    }

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Jon P, Jul 25 '19 at 23:37
What sort of shenanigans is this: `class="...dtAddClass` ?!? What is this: `class="btn.srchgrid"`, `class="btn.rolesgrid"` or... `class="btn.additionalsrchgrid"`...? — zer00ne, Jul 26 '19 at 00:35
Think you are missing a space in `className` concatenation. If you have dots in the actual names that is just silly — charlietfl, Jul 26 '19 at 00:48
@zer00ne it's just that `btn.srchgrid` and `btn.additionalsrchgrid` also contained `btn btn-default. I didn't want to write the whole thing out so I just shortened them with the ... — Bodrov, Jul 26 '19 at 01:58

GrahamTheDev · Accepted Answer · 2019-07-26T00:20:03.727

MY ORIGINAL ANSWER (WRONG!)

left old answer in case someone thinks same thing as me to save them time

I didn't know you can have full stops in class names and I have been at this years, something new learned! However I would consider it a bad practice because of this issue.

// this creates:
// btn 1: class="btn btn-default dtAddClass btn.rolesgrid"
// btn 2: class="...dtAddClass btn.srchgrid"
// btn 3: class="...dtAddClass btn.additionalsrchgrid"
// this is exactly what I want

Actually it isn't.

btn.rolesgrid is an invalid class, you cannot have a fullstop (period) in a class name.

The reason the second one opened them all is because you used a comma, you basically asked for 'if I click on dtAddClass OR .btn.rolesgrid

You need to strip the full stop from _grid and replace it with a space instead.

CORRECT ANSWER

As you have a fullstop you need to either escape it

.btn\.rolesgrid (older browsers may not support it)

or wrap it in square brackets

[class~="a.b"]

Neither are good ideas to be honest, would be better to strip the auto generated full stop and use a space instead.

Hey Graham, thanks for the info! I eliminated the . that was generated from `rolesgrid` and combined it with dtAddClass---the new `className` is now `.dtAddClass-rolesgrid` and I used it to open the modal. I'll be able to activate the other buttons (i.e. `.dtAddClass-srchgrid`) the same way. — Bodrov, Jul 26 '19 at 13:17

Button event isn't triggered (working w/ dynamically created classes)

Button creation

onClick event:

Method:

1 Answers1