div上的JavaScript点击事件
Posted
技术标签:
【中文标题】div上的JavaScript点击事件【英文标题】:JavaScript click event on div 【发布时间】:2017-04-23 02:47:59 【问题描述】:我正在处理 javascript 项目,但在点击事件和检索有关点击的元素的正确信息时遇到问题。我对 JavaScript 比较陌生。
我正在处理的实际代码相当复杂,但我只发布了一段代码来说明我的问题。
function App()
this.name = "New App";
App.prototype.createDIV = function()
var h = "<div class='clickable' id='idToShow'><div class='name' id='notToShow'>" + this.name + "</div></div>";
$('#content').html(h);
App.prototype.showID = function(e)
if (e.target.id == 'idToShow')
alert(this.name); // this doesn't display, because incorrect ID is retrieved
$(document).ready(function()
var newApp = new App();
$("input#btn").click(newApp.createDIV.bind(newApp));
$("div").on("click", ".clickable", newApp.showID.bind(newApp));
);
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<div id="content"></div>
<input type="button" id="btn" value="CLICK">
我在应用程序中有一个包含多个原型的对象。在文档加载时,对象被构造,事件被附加到元素并绑定到对象。单击该按钮,将动态创建一组新的 div 结果。
现在这就是我开始出错的地方。我使用 CLICKABLE 类将事件附加到 div,我想检索该特定 DIV 元素的 id (id='idToShow');但是我一直在检索以下 DIV 的 id (id='notToShow')。
我可能不完全理解为什么会发生这种情况,以及为了获得正确的 ID 应该采取哪些措施来防止这种情况发生。
【问题讨论】:
如果 createDIV 可以执行多次,看起来可以,因为它是一个事件处理程序,你不能像现在这样使用你的 id。 ID 在页面上必须是唯一的。它们是唯一标识符。旁注,您有一个function App()
之后缺少
感谢您注意到 尝试使用if (e.currentTarget.id == 'idToShow')
而不是if (e.target.id == 'idToShow')
。
【讨论】:
谢谢你这对我来说很完美!为什么使用“e.target.id”返回嵌套div中最后一个孩子的id?以上是关于div上的JavaScript点击事件的主要内容,如果未能解决你的问题,请参考以下文章