onclick 功能在编辑 HTML 后复制答案

【问题标题】：onclick function replicates after edit HTMLonclick 功能在编辑 HTML 后复制
【发布时间】：2023-03-15 00:22:01
【问题描述】：

我的 html 视图中有一个文章列表，其中包含这样的链接：

<a href="#" onclick="open_modal(event,11)">Article info</a>

函数 open_modal() 用于启动引导模式并通过 ajax 使用 id = 11 的文章的信息填充它（“event”参数用于 preventDefault()）。但是当我直接在浏览器上编辑HTML（F12）并用另一个（例如10）更改id时，当模式启动时，它会填充第11条和它下面的第10条的信息......所以on...这就像每次我在 HTML 上编辑 id 时都会触发该功能...为什么会这样？是否有一些我缺少的 javascript 概念？

open_modal() 的代码是这样的：

function open_modal(event, id){
    event.preventDefault();
    $("#modal").modal("show");
    $.ajax({
        url: the-url,
        type: 'POST',
        data: { 'id' : id },
        success: function(response) {
            // Here I append the response inside the modal
            $('#modal .modal-dialog').append(response);
        },
        error: function(){
            // Do something
        }
    });
}

【问题讨论】：

如果没有其他代码，很难理解发生了什么。你能把open_modal的代码贴出来吗？
open_modal() 函数工作正常，我已经测试过了。我只想知道为什么会出现这个错误？
如果您只是在控制台中执行$("#modal").modal("show")，则显示模式的内容是什么？
您正在附加响应。你应该使用 $('#modal .modal-dialog').html(response);
同上。 Append 只是不断地在列表的底部添加一些东西（保持上面列表的其余部分不变）。如果要替换内容，请使用html。

标签： javascript jquery html ajax twitter-bootstrap

【解决方案1】：

先清空模态内容：

$('#modal .modal-dialog').empty().append(response);

【讨论】：