Why are my button menu buttons only working once?

thegamechangerpro

My Case:
https://jsfiddle.net/thegamechangerpro/q2o8heuc/24/
I apologize this is so messy, but cleaning it up kept breaking it.

Why do my inline button-menus only work once? In the per column if I choose day, I can't change it after that. I have to refresh the table.

COLUMN
/17/{"title": "Per", "data": "per", "name": "per"},

COL DEF
{"targets": [17], "className": 'dt-body-right', "render": function (data, type, row)
{return data + '<button class="btn btn-default fa-solid fa-caret-down" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>

Hour Day Week Flat

'}},

FUNCTION
$('.rateper').click(function(){
var id = this.id;
var data = table.row( $(this).parents('tr') ).data();
var pk = data.id;
var td = $(this).closest('td');
table.cell(td).data(id).draw();
});

Thanks to anyone that may have some tips!!!!

kthorngren

Use delegated events like this example.

Kevin

thegamechangerpro

Thanks Kevin!!!!!