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

Posted 2023-03-28

【中文标题】如何将事件侦听器添加到 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)

【发布时间】：2019-09-26 18:57:43

【问题描述】：

我拆分了事件监听器和 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");
)

【参考方案1】：

您需要将事件附加到页面加载时存在的内容。围绕该按钮的 div 或者通常我只使用主体。

例如：

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

这称为事件冒泡或传播。这是 jQuery 文档中的一个 sn-p。

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.

【讨论】：

谢谢，你非常了解jquery。我试图用 ag 网格的东西来解决