如何将事件侦听器添加到 ag 网格单元格内的元素（使用 js 或 jquery，而不是 angular，不是 reactjs，不是 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.

如何将事件侦听器添加到 ag 网格单元格内的元素（使用 js 或 jquery，而不是 angular，不是 reactjs，不是 vue）

how to add event listener to the element inside cell of ag grid (with js or jquery, not angular, not reactjs, not vue)

html

javascript

jquery

ag-grid