Asp.net mvc：我的事件侦听器(在 View <script> 标记中)只工作一次

Question

我在stackOverflow上看到过这个问题，但它对我没有帮助，因为我的代码完全不同。我试图在右键单击图像时显示一个菜单，它运行良好，但只有一次。这是我的观点：

@{
ViewBag.Title = "Index";
}
<h2>Index</h2>

<div class="container div1">
<div class="row">
<div class="column">
@for (int i = 0; i < Model.Count; i += 2)
{
<div class="hov" style="position:relative; background-image: url(@Model[i].ImgLink); background-position: center; background-size: cover; margin-top: 2%;">
<img src="@Model[i].ImgLink" class="img-fluid clickable" />
<img src="~/Videos/play_button.png" class="play-btn" data-toggle="modal" data-target="#@Model[i].Id" />
</div>
<div class="modal fade" id="@Model[i].Id">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<iframe width="560" class="venobox" height="315" src=@("https://www.youtube.com/embed/" + Model[i].VideoId) frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<ul class="menu">
<li class="menu-item"><a href="" data-id=@Model[i].Id>Delete</a></li>
<li class="menu-item"><a href="" data-id=@Model[i].Id>Edit </a> </li>
</ul>
}
</div>
<div class="column">
@for (int i = 1; i < Model.Count; i += 2)
{
<div class="hov" style="position: relative; background-image: url( @Model[i].ImgLink ); background-position: center; background-size: cover; margin-top: 2%;">
<img src="@Model[i].ImgLink" class="img-fluid" />
<img src="~/Videos/play_button.png" class="play-btn" data-toggle="modal" data-target="#@Model[i].Id" />
</div>
<div class="modal fade" id="@Model[i].Id">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<iframe width="560" class="venobox" height="315" src=@("https://www.youtube.com/embed/" + Model[i].VideoId) frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
}
</div>
</div>
<div class="out-click"></div>
</div>


<div class="container div2">
<div class="row">
<div class="column">
@for (int i = 0; i < Model.Count; i += 3)
{
<div class="hov" style="position:relative; background-image: url(@Model[i].ImgLink); background-position: center; background-size: cover; margin-top: 2%;">
<img src="@Model[i].ImgLink" class="img-fluid clickable" />
<img src="~/Videos/play_button.png" class="play-btn" data-toggle="modal" data-target="#@Model[i].Id" />
</div>
<div class="modal fade" id="@Model[i].Id">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<iframe width="560" class="venobox" height="315" src=@("https://www.youtube.com/embed/" + Model[i].VideoId) frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<ul class="menu">
<li class="menu-item"><a href="" data-id=@Model[i].Id>Delete</a></li>
<li class="menu-item"><a href="" data-id=@Model[i].Id>Edit </a> </li>
</ul>
}
</div>
<div class="column">
@for (int i = 1; i < Model.Count; i += 3)
{
<div class="hov" style="position: relative; background-image: url( @Model[i].ImgLink ); background-position: center; background-size: cover; margin-top: 2%;">
<img src="@Model[i].ImgLink" class="img-fluid" />
<img src="~/Videos/play_button.png" class="play-btn" data-toggle="modal" data-target="#@Model[i].Id" />
</div>
<div class="modal fade" id="@Model[i].Id">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<iframe width="560" class="venobox" height="315" src=@("https://www.youtube.com/embed/" + Model[i].VideoId) frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
}
</div>
<div class="column">
@for (int i = 2; i < Model.Count; i += 3)
{
<div class="hov" style="position: relative; background-image: url( @Model[i].ImgLink ); background-position: center; background-size: cover; margin-top: 2%;">
<img src="@Model[i].ImgLink" class="img-fluid" />
<img src="~/Videos/play_button.png" class="play-btn" data-toggle="modal" data-target="#@Model[i].Id" />
</div>
<div class="modal fade" id="@Model[i].Id">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<iframe width="560" class="venobox" height="315" src=@("https://www.youtube.com/embed/" + Model[i].VideoId) frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
}
</div>
</div>
<div class="out-click"></div>
</div>
<style>
body{
margin: 0;
padding: 0;
}
.play-btn {
width: 3.5em;
cursor: pointer;
transition: 0.5s;
opacity: 0;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: block;
margin: auto;
}
.img-fluid{
width: 30em;
height: auto;
}
.hov:hover .play-btn{
opacity: 1;
}
.row {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.row .column {
flex: 33.3%;
width: auto;
overflow: hidden;
padding: 0 4px;
height: 100%;
}
.row .column .img-fluid {
margin-top: 2%;
width: 100%;
height: 100%;
}
.menu {
display: block;
background-color: white;
padding: 10px 0px;
border-radius: 5px;
box-shadow: 2px 2px 30px lightgrey;
position: absolute;
transform-origin: center;
z-index: 2;
opacity: 0;
transform: scale(0);
transition: transform 0.2s, opacity 0.2s;
}
.menu.show {
opacity: 1;
transform: scale(1);
transform-origin: top left;
}
.menu-item {
display: block;
padding: 10px 30px;
transition: 0.1s;
color: #666;
}
.menu-item:hover {
background-color: #eee;
cursor: pointer;
}
.out-click {
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index: 1;
display: none;
}
@@media only screen and (max-width: 800px) {
.row .column {
flex: 50%;
}
.play-btn {
width: 3em;
}
.img-fluid{

}
}
@@media only screen and (max-width: 600px) {
.row .column {
flex: 100%;
}
iframe {
width: 100%;
height: auto;
}
}
</style>
@section scripts{
<script>
$(document).ready(function () {
var width = $(window).width();
if (width <= 800 && width > 600) {
$(".div2").remove();
}
else {
$(".div1").remove();
}
const clickable = $(".clickable");
const menu = $(".menu");
const outClick = $(".out-click");
for (var i = 0; i < clickable.length; i++) {
clickable[i].addEventListener('contextmenu', e => {
e.preventDefault();
for (var j = 0; j < menu.length; j++) {
menu[j].style.top = `${e.clientY}px`;
menu[j].style.left = `${e.clientX}px`;
menu[j].classList.add('show');
}
for (var j = 0; j < outClick.length; j++) {
outClick[j].style.display = "block";
}
});
}
for (var i = 0; i < outClick.length; i++) {
outClick[i].addEventListener('click', () => {
for (var j = 0; j < menu.length; j++) {
menu[j].classList.remove('show');
}
outClick[i].style.display = "none";
});
}

});

</script>
}

我只对div1和div2类中的第一个图像进行了测试。我从这里复制了事件侦听器的部分代码：https://technokami.in/custom-right-click-context-menu-using-html-css-javascript如果我的视图太大，您无法找到问题所在，请访问上面的页面，因为它只包含有问题的事件侦听器。此外，因为我有多个图像要对右键单击做出反应，所以我使用类而不是id-s来获取元素。在标记中，我必须使用for-s，因为类返回一个元素集合。这应该是唯一的区别。我还试着把代码放在文档之外。准备好了，结果是一样的。

Answer 1

尽管我对js或jQuery不是很了解，但我还是纠正了它。由于某种原因，它找不到类的元素"点击"out click"；，我得到了"；未捕获的TypeError:无法在HTMLDivElement中读取未定义的属性"style"错误我把脚本中的最后一条指令放在另一条中；CCD_ 1及其作用。