繁体   English   中英

将事件处理程序添加到.innerHTML中创建的元素ID中

Add event handler to element ID created within .innerHTML

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在构建一个Web应用程序,该应用程序根据输入到表单的内容在队列中创建元素。 这些元素的HTML是由“模板”生成的,其中包含几个图标,一旦我可以添加addEventHandler调用,这些图标将用作按钮,但由于我的一生,我无法使其正常工作。 我的事件处理程序应在DOM加载后调用,所以我不确定是什么问题。

这是我的(基本)代码:

 // Init app let init = function() { // Set up user input handling submit.addEventListener('click', inputHandler); // TODO: Fix button contentInput.addEventListener('keypress', function(e) { if (e.keyCode == 13 && contentInput.value != '') { e.preventDefault(); inputHandler(); } }); let getFlag = document.getElementById('flag--LRI3LcUxQ9W5RfIWoc8'); getFlag.addEventListener('click', function() { console.log('IT WORKED'); }); } let renderQueryList = function() { // Determine which item to render (timestamp, number of views, flagged) const oneDay = 60 * 60 * 24 * 1000; const arrLength = queue.length; queueDisplay.innerHTML = ''; for (i = 0; i < arrLength; i++) { let element = queue[i]; let whenAdded = element.age; if (!element.hasOwnProperty('type')) { element.type = 'text'; } if ((now - whenAdded) > oneDay) { // console.log(element.text + ': this element is expired') return element.expired === true; } // TODO: check for type in templates, fallback to default type or display next item let singleElement = contentTypeTemplates[element.type](element); // for each item in list queueDisplay.appendChild(singleElement); } } // Set up templates let contentTypeTemplates = { text: function(contentItem, index) { let container = document.createElement('div'); container.className = 'queueItem'; container.setAttribute('id', contentItem.key); container.innerHTML = contentItem.text + '<div class="queueControls">' + '<i style="display: none;" class=" delete fas fa-times-circle" id="delete-' + contentItem.key + '"></i>' + '<i class="flag fas fa-flag" id="flag-' + contentItem.key + '"></i>' + '<i class="permanent fas fa-thumbtack" id="permanent-' + contentItem.key + '"></i>' + '</div>'; return container; }, image: function(contentItem) { } } document.addEventListener("DOMContentLoaded", function(event) { init(); }); 

1 个回复

完成container.innerHTML = 'html string'您可以使用

container.querySelector('.someIconClass').addEventListener(eventName, handler)
1 Vue JS,为在JS中创建的元素添加事件处理程序

我正在Axios API调用内填充一个表,需要在每行中添加一个删除按钮。 根据目前的经验,我不太确定如何处理此问题: 当然,这是行不通的。 如何获得删除按钮的单击处理程序以采用参数并将其作为方法进行处理? ...

2 Angular 6 - 向动态创建的 html 元素添加事件处理程序

我想将点击事件附加到动态创建的 html 元素。 单击事件应该能够触发组件中的另一个方法。 我已经看过其他建议使用 ElementRef 附加事件的 SO 答案。 但是,它不适用于我的情况。 我正在使用 mapQuest API 来渲染地图。 地图将绘制地理编码并添加滚动内容。 要添加翻转内容, ...

2019-01-10 13:15:14 2 10266   angular
4 使用jQuery自动将事件处理程序添加到新创建的元素

在文档就绪时,我将此事件处理程序附加到具有类bubbleItemOff的所有元素。 我的问题是,一些bubbleItemOff元素是在触发文档就绪事件后动态创建的。 有没有办法自动将事件处理程序添加到新创建的元素中,或者在创建元素后是否必须显式执行此操作? ...

2012-05-07 20:44:13 2 1823   jquery
5 将事件添加到创建的元素

我正在更新我的代码...大多数事情都解决了。 问题仍然存在: 当我在元素(1和2)之间快速移动鼠标时,工具提示不会显示。 我认为这是因为我对元素鼠标的延迟有所延迟: 我有它允许鼠标移动工具提示,当它有一个链接时。 想法是当鼠标移过另一个元素时取消隐藏延迟。 该插 ...

2013-04-15 14:56:13 7 487   jquery
8 向 tinyMCE 中的元素添加事件处理程序

我正在为 tinymce 开发一个插件,它将 HTML 元素添加到编辑器内容中... 这是我插入代码的方式: 现在,如果用户单击新的 HTML 元素,我想打开一个对话框。 我尝试添加这样的事件侦听器 但这没有任何作用...... 我正在使用 tinyMCE 5.x ...

9 修改使用innerHTML创建的元素的innerHTML

基本上,我有一个div,可以使用innerHTML将内容插入其中。 插入的HTML的一部分是: 这是一个计时器,应该使用setTimeout递增。 稍后,我调用以下函数来修改计时器块: 当使用Firebug或警报检查innerHTML属性时,span元素的innerHTML正 ...

10 如何将事件处理程序绑定到正在创建的元素?

在我的页面中,我必须根据使用的操作动态创建一些元素,例如,当用户单击按钮时,我将创建一个新的div,但是我想在此div中添加一个点击处理程序: 运行此代码时,出现错误: ele未定义。 也许是由于我使用 html dom正在构建中,因此找不到元素。(我认为这就是为什么 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM