Question

原谅我，如果我说错了标题，我猜测我的问题可能是什么，因为我不是一个javascript编码专家。我有一系列由php循环生成的div，其中包含通过添加mysql db表中包含行的所有信息的自动增量列中包含的唯一ID而创建的唯一ID。

当用户点击div时，此功能会触发：

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

javascript代码：

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

这很好用，但是现在我需要开始使用showModal onclick函数将javascript按钮（在我的情况下使用onclick函数添加img标签）添加到div中。

我将此代码添加到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.

arrowCheck功能：

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

这段代码也可以工作，但只有在用户点击div一次之后，第一次单击div时两个函数都会关闭（即模式窗口和向下箭头所示的额外按钮）但是在第一次之后单击addEventListener执行它的工作，单击向下箭头只显示额外的按钮，在其他地方调出模态等。

我猜我需要在用户点击div并触发showModal（）之前创建事件监听器，这是正确的吗？我不确定如何在单击div之前为每个向下箭头图像创建一个唯一的事件监听器，或者即使我需要。谢谢你的帮助！

Answer 1

由于在模态函数中创建了事件监听器，因此需要在添加另一个监听器之前调用模态函数。

要获得所需的结果，您可以直接将onclick方法添加到PHP代码创建的图像中，也可以检测页面何时完成加载并添加那些侦听器。但是，要执行后者，您需要查询图像所有的共同点，例如类名，或者您必须跟踪所使用的ID并为每个ID手动添加一个侦听器。 e.g：

<body onload="initEventhandling()">

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

Answer 2

David Millar的代码指出了我正确的方向。我试图将initEventHandling函数放在body标签的onload中，但是我无法让它工作。它执行了该函数但我无法使eventListeners工作。我通过为每个img标记使用onload创建一个事件监听器来解决它，所以我的代码最终结果如下：

<img id=\"".$appChart['ID']."_down-arrow\" onload=\"addEvent('".$appChart['ID']."')\" onclick=\"clickReviewArrow('".$appChart['ID']."')\" src='...' />

的javascript：

function addEvent(ID) { var downArrow = document.getElementById(ID+'_down-arrow');
downArrow.addEventListener('click',arrowCheck,false); }

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

David Millar可能一直在暗示这一点，如果是的话，我会标记他的回答。

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

2 个答案: