Asp.net mvc：我的事件监听器在 View <script> 标签中只工作一次

问题描述

我在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，因为这些类返回一个元素集合。这应该是唯一的区别。我也尝试将代码放在 document.ready 之外，结果是一样的。

解决方法

尽管我不太了解 js 或 jQuery，但我纠正了它。出于某种原因，它找不到“out-click”类的元素，我收到“未捕获的类型错误：无法读取 HTMLDivElement 处未定义的属性‘样式’”。错误。我将脚本中的最后一条指令放在另一个 for 中； for (var j = 0; j < outClick.length; j++) { outClick[j].style.display = "none";} 并且成功了。