问题描述
我正在为这个 petshop 软件网络基础构建一个搜索系统，问题是我搜索一个名称，然后将带有 XMLHttpRequest 的名称发送到执行查询的 php 页面，并返回结果并将它们显示在我的搜索页面上，直到这里没问题。 php页面返回到搜索页面的信息是这样的：
<?php
$query = "selec ...
$queryName = mysqli_query...
while($fetchNames = mysqli_fetch_array...
?>
<a class="profile">
<div id="clientInfo"><?php echo $fetchNames[0]; ?></div>
</a>
<?php }
?>`
我尝试访问在 searchpage.php 上导入的 html 类 .profile：
`<script>
document.querySelector('.profile').addEventListener('click',function=(){
alert('js code works!');
});
</script>
</body>`
我试图在 while 循环结束后立即将其与 php 查询页面的结果一起导入，即使使用 window.onload=func ......它也行不通！
javascript 无法在导入的文档中工作，它看不到显示警报的类。 我该如何解决这个问题？
提前致谢！
1楼
Obsidian Age
1
已采纳
2019-02-21 01:17:10
由于您有动态生成的元素，您需要利用并定位页面加载时存在的元素，然后从那里开始工作。
您没有在问题中提到任何父元素，所以我将在我的回答中定位<body> ，因为它总是存在于页面加载中。
当您将eventListener向上移动到层次结构时，您需要忽略除所需元素之外的点击。
这可以通过和来实现：
if (document.querySelector('.profile').contains(event.target)) { }
所以你的最终代码看起来像：
const body = document.querySelector('body');
body.addEventListener('click', function() {
if (document.querySelector('.profile').contains(event.target)) {
alert('js code works!');
}
})
以上确保当您单击动态生成的元素时，您的alert()将触发，但在您单击任何其他元素时不会触发。
2楼
Minan
0
2019-02-21 01:06:26
我可以建议两种不同的方法。 第一个是您可以在 html 代码之后编写 javascript 代码。 或等待使用 'document.addEventListener('DOMContentLoaded', ...)' 加载文档
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('.profile').addEventListener('click',function=(){
alert('js code works!');
});
})