在由php循环创建的独特行上创建javascript事件侦听器

请原谅我，如果我将错误的标题标题标出，我在猜测我的问题可能是什么，因为我不是JavaScript编码专家。我有一系列的div由php循环生成，其唯一id是通过添加包含在mysql db表中的自动增量列中包含的唯一id创建的，其中包含该行的所有信息。在由php循环创建的独特行上创建javascript事件侦听器

当用户点击的div这一功能触发关：

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

javascript代码：

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

这工作得很好，但现在我要开始添加JavaScript按钮（在我的情况带有onclick函数的img标签）与showModal onclick函数的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之前为每个向下箭头图像创建唯一的事件侦听器，或者即使需要。谢谢你的帮助！

来源

2015-01-26 Avedis777

由于正在模态函数中创建的事件侦听器，您需要调用模态功能甚至还添加了其他听众面前。

要得到你想要的结果，你既可以的onclick方法直接添加到图像的PHP代码创建，或者你可以发现当页面加载完成，并添加这些监听器即可。然而，要做后者，你需要查询图像所有的共同点，比如类名，或者你必须跟踪所使用的ID并为每个ID手动添加一个侦听器。例如：

<body onload="initEventhandling()"> 

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

来源

2015-01-26 22:10:43

大卫米勒的代码指出我在正确的方向。我试图把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(); }

大卫·米勒可能已经暗示这一点，如果是的话我会标记他的答案。

来源

2015-01-27 16:12:25 Avedis777

在由php循环创建的独特行上创建javascript事件侦听器

回答

相关问题