как добавить прослушиватель событий в элемент в ячейке сетки ag (с помощью js или jquery, не угловой, не реагирующий, не vue)

Question

Я разделил функции прослушивания событий и функции cellrender, но функция jquery не запускается внизу, когда я нажимаю кнопку для этого. Как я могу добавить прослушиватель событий для этих двух кнопок.

//action column
let actionCellTemplate = (params) => {
    let device_id = params.data.id;
    let eDiv = document.createElement('div');
    eDiv.innerHTML = '<button type="button" class="btn btn-primary btn-alloc-token">Alloc Token</button>'+
                     '<button type="button" class="btn btn-success btn-client-secret">Client Key</button>';
    return eDiv;
}

// specify the columns
   let columnDefs = [
         { headerName: "ID", field: "id",  filter: 'agNumberColumnFilter', headerCheckboxSelection: true, headerCheckboxSelectionFilteredOnly: true, checkboxSelection: true },
         { headerName: "Name", field: "name", filter: "agTextColumnFilter", sortable: true },
         { headerName: "Location", field: "location", filter: "agTextColumnFilter", sortable: true },
         { headerName: "Active Tokens", field: "active_tokens", filter: "agTextColumnFilter", sortable: true },
         { headerName: "Action", field: "name", filter: "agTextColumnFilter", sortable: true, cellRenderer: actionCellTemplate },
   ];

$('.btn-alloc-token').on('click', function(){
   console.log("alloc");
})

Answer 1

Вам необходимо прикрепить событие к тому, что существует при загрузке страницы. Либо div вокруг этой кнопки, либо обычно я просто использую тело.

Например:

$('body').on('click', '.btn-alloc-token', function(){
   console.log("alloc");
})

Это называется пузырением событий или распространением. Вот фрагмент из документации по jQuery.

http://api.jquery.com/on/#direct-and-delegated-events

The majority of browser events bubble, or propagate, from the deepest, innermost element (the event target) in the document where they occur all the way up to the body and the document element. In Internet Explorer 8 and lower, a few events such as change and submit do not natively bubble but jQuery patches these to bubble and create consistent cross-browser behavior.