Django模板for循环内嵌Jquery弹窗关闭卡顿问题求助

问题原因 #

1. 重复生成DOM元素：你将弹窗容器.form-popup-bg和关闭按钮#btnCloseForm写在for循环内部，循环执行多少次就会生成多少个结构完全一致的弹窗节点，而id属性要求页面唯一，重复id会导致元素选择逻辑异常。
2. 重复绑定事件：for循环每次执行都会插入一遍相同的JS代码，意味着你的打开、关闭事件会给每个匹配的元素绑定N次（N等于循环次数）。同时你调用$('.form-popup-bg').addClass('is-visible')打开弹窗时，会给所有生成的弹窗都加上显示类，多个弹窗层级叠加在页面上，你每次点击关闭只能关掉最上层的一个，所以需要点击N次才能把所有叠着的弹窗全部关闭，这就是你需要多次点击才能关闭的核心原因。

解决方案 #

调整代码结构，把弹窗和JS逻辑全部移到for循环外部，单弹窗复用即可，如果需要传递当前点击的条目数据到弹窗，可以通过自定义属性实现：

修正后的模板代码 #

{%for item in obj.data %}
<article class="episode">
    <div class="episode__number">{{forloop.counter0}}</div>
    <div class="episode__content">
        <div class="title">
            <!-- 给打开按钮加自定义属性存储需要传递到弹窗的数据 -->
            <p class="btnOpenForm" 
               data-date="{{item.date}}"
               data-time="{{item.time}}"
               data-adult="{{item.adult}}"
            >{{item.date}}</p>
        </div>
        <div class="story">
            <p>Time: {{item.time}}</p>
            <p>Adult: {{item.adult}}</p>
            <p>Children: {{item.children}}</p>
            <p>Combo: {{item.featuredCombo}}</p>
            <p>Service: {{item.service}}</p>
            <p>Add on: {{item.addOn}}</p>
        </div>
    </div>
</article>
{%endfor%}

<!-- 弹窗移到循环外，整个页面只保留一个 -->
<div class="form-popup-bg">
    <div class="form-container">
        <button id="btnCloseForm" class="close-button">X</button>
        <h1>Contact Us</h1>
        <p>For more information. Please complete this form.</p>
        <form action="">
            <div class="form-group">
                <label for="">Name</label>
                <input type="text" class="form-control" />
            </div>
            <div class="form-group">
                <label for="">Company Name</label>
                <input class="form-control" type="text" />
            </div>
            <div class="form-group">
                <label for="">E-Mail Address</label>
                <input class="form-control" type="text" />
            </div>
            <div class="form-group">
                <label for="">Phone Number</label>
                <input class="form-control" type="text" />
            </div>
            <button>Submit</button>
        </form>
    </div>
</div>

<!-- JS也移到循环外，只执行一次 -->
<script>
function closeForm() {
    $('.form-popup-bg').removeClass('is-visible');
}

$(document).ready(function($) {
    /* 打开弹窗，同时读取点击条目的数据 */
    $('.btnOpenForm').on('click', function(event) {
        event.preventDefault();
        // 示例：读取当前点击按钮的自定义属性，可根据需求赋值给弹窗内的元素
        const currentDate = $(this).data('date');
        console.log('当前点击的条目日期：', currentDate);
        $('.form-popup-bg').addClass('is-visible');
    });

    // 关闭弹窗
    $('.form-popup-bg').on('click', function(event) {
        if ($(event.target).is('.form-popup-bg') || $(event.target).is('#btnCloseForm')) {
            event.preventDefault();
            $(this).removeClass('is-visible');
        }
    });
});
</script>

调整后事件只会绑定一次，弹窗也只会生成一个，点击关闭一次就可以生效。

内容的提问来源于stack exchange，提问作者Anhle.ptit