CODEWITHSUNDEEP
javascriptjqueryeventsdatatables
Bodrov
Bodrov

Reputation: 867

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

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

Upvotes: 1

Views: 38

Answers (1)

GrahamTheDev
GrahamTheDev

Reputation: 24825

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.

Upvotes: 1

Related Questions