gpt4 book ai didi

javascript - 在 php 循环创建的唯一行上创建 javascript 事件监听器

转载 作者:行者123 更新时间:2023-11-28 07:40:04 26 4
gpt4 key购买 nike

如果我的标题用错了,请原谅我,我正在猜测我的问题可能是什么,因为我不是 JavaScript 编码专家。我有一系列由 php 循环生成的 div,这些 div 具有通过添加 mysql 数据库表中的自动增量列中包含的唯一 id 创建的唯一 id,该表包含该行的所有信息。

当用户单击 div 时,此函数将触发:

onclick=\"showModal('".$rowInfo['ID']."_row-id')\"

JavaScript 代码:

function showModal(ID) { /* code that shows hidden modal window */ }

这工作正常,但是现在我需要开始使用 showModal onclick 函数向 div 添加 javascript 按钮(在我的例子中是带有 onclick 函数的 img 标签)。

我将此代码添加到 showModal(ID) 函数中:

var downArrow = document.getElementById(ID+'_down-arrow'); // Down arrow is the button users click to show addition buttons/divs
downArrow.addEventListener('click',arrowCheck,false); // checks to see if down arrow was clicked, if so arrowCheck function runs and stops propagation.

箭头检查功能:

function arrowCheck(e) { e.stopPropagation(); }

这段代码也有效,但仅在用户单击 div 一次之后,第一次单击 div 时,两个函数都会触发(即模式窗口和向下箭头显示的额外按钮),但在第一次单击之后单击 addEventListener 完成它的工作,单击向下箭头仅显示额外的按钮,其他地方会显示模式等。

我猜我需要在用户单击 div 并触发 showModal() 之前创建事件监听器,这是正确的吗?我不确定如何在单击 div 之前为每个向下箭头图像创建一个唯一的事件监听器,或者即使我需要这样做。感谢您的帮助!

最佳答案

由于事件监听器是在模态函数中创建的,因此您需要在添加其他监听器之前调用模态函数。

要获得所需的结果,您可以直接将 onclick 方法添加到 PHP 代码创建的图像中,也可以检测页面何时完成加载,然后添加这些监听器。不过,要执行后者,您需要查询所有图像共有的内容(例如类名),或者必须跟踪所使用的 ID 并为每个 ID 手动添加监听器。例如:

<body onload="initEventhandling()">

initEventHandling = function () {
var buttons = document.getElementsByClassName("image-button");
for (button in buttons) {
button.addEventListener('click', arrowCheck, false);
}
}

关于javascript - 在 php 循环创建的唯一行上创建 javascript 事件监听器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28159523/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com