Ajax触发模态框首次点击不生效、仅第二次点击正常问题咨询

1 核心错误：ID拼写错误 #

你的代码中调用模态框展示的选择器存在拼写疏漏，少写了字母t：

• 错误写法：$("#suppor-ticket").modal('show')
• 正确写法：$("#support-ticket").modal('show')

首次点击时你已经成功把模态框DOM插入到页面中，但因为选择器拼写错误找不到对应元素，所以模态框没有触发展示；第二次点击时页面已经存在对应的模态框DOM，此时如果拼写修正后就可以正常触发。

2 其他可优化点 #

• 避免重复追加DOM：每次点击按钮都会触发Ajax请求并追加新的模态框结构，会导致页面出现重复ID的DOM元素，建议追加前先判断对应模态框是否已经存在，不存在再执行追加逻辑
• 可增加加载状态提示：避免用户重复点击触发多次请求

修正后代码 #

$("a#get-support-ticket-form").click(function() {
    // 先判断模态框是否已存在，避免重复追加
    if ($("#support-ticket").length === 0) {
        $.ajax({
            type: 'GET',
            url: '/support-ticket',
            success: function(data) {
                $("#support-ticket-modal").append(data);
                // 修正拼写错误后调用展示
                $("#support-ticket").modal('show');
            },
            error: function(error) {
                console.log("error")
            }
        });
    } else {
        // 已存在直接展示
        $("#support-ticket").modal('show');
    }
});

内容的提问来源于stack exchange，提问作者Mohammed Bajuaifer