javascript - eventlistener("blur") 和设置 outerHTML

Question

我有这个代码：

function setInfo(id, idelem2) {

        let myElement = document.getElementById(idelem2).outerHTML;
        let test = document.getElementById(idelem2);
        let tag = test.tagName;
        test.outerHTML = "<input id='"+idelem2+"' type='text' autocomplete='off'>";
        let myInput = document.getElementById(idelem2);
        document.getElementById(idelem2).focus();

        function escapeHTML(text) {

            var map = {
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#039;'
            };
            
            return text.replace(/[&<>"']/g, function(m) { return map[m]; 

            });

        }

        document.addEventListener('mousedown', function(event) {

            myInput.outerHTML = myElement;
            return false;

        })

        myInput.addEventListener('keyup', function(event) {

                if(event.keyCode === 13) {

                    let newvalue = myInput.value;

                    $(document).ready(function() {

                        let post = {};
                        post[id] = newvalue;

                        $.ajax({

                            type: 'POST',
                            url: 'traitements/traitement-profil.php',
                            data: post,
                            dataType: 'text',

                            success: function(data) {

                                if(data != "Operation réussie !") {

                                    let errorWindow = document.getElementById('erreur');

                                    errorWindow.className = "alert alert-danger my-5 text-center";
                                    errorWindow.innerHTML = data;

                                    setTimeout(() => {

                                        errorWindow.className = "alert alert-danger my-5 text-center d-none";

                                    }, 4500);

                                }

                                if(data == "Operation réussie !") {

                                    if(idelem2 == "monSite") {

                                        if(newvalue == "") {

                                            myInput.outerHTML = "<"+tag+" id="+idelem2+">"+"Non renseigné !</"+tag+">";
                                            let errorWindow = document.getElementById('erreur');
                                            errorWindow.className = "alert alert-success my-5 text-center";
                                            errorWindow.innerHTML = data;
                                            setTimeout(() => {

                                                errorWindow.className = "alert alert-danger my-5 text-center d-none";

                                            }, 4500);
                                            
                                            return;

                                        }

                                        myInput.outerHTML = "<a class='text-white' id="+idelem2+" href='"+newvalue+"' target='_blank' >Site personnel</a>";
                                        let errorWindow = document.getElementById('erreur');
                                        errorWindow.className = "alert alert-success my-5 text-center";
                                        errorWindow.innerHTML = data;
                                        setTimeout(() => {

                                            errorWindow.className = "alert alert-danger my-5 text-center d-none";

                                        }, 4500);

                                        return;

                                    }

                                    if(idelem2 == "monGithub") {

                                        if(newvalue == "") {

                                            myInput.outerHTML = "<"+tag+" id="+idelem2+">"+"Non renseigné !</"+tag+">";
                                            let errorWindow = document.getElementById('erreur');
                                            errorWindow.className = "alert alert-success my-5 text-center";
                                            errorWindow.innerHTML = data;
                                            setTimeout(() => {

                                                errorWindow.className = "alert alert-danger my-5 text-center d-none";

                                            }, 4500);

                                            return;

                                        }

                                        myInput.outerHTML = "<a class='text-white' id="+idelem2+" href='https://github.com/"+newvalue+"' target='_blank' >"+newvalue+"</a>";
                                        let errorWindow = document.getElementById('erreur');
                                        errorWindow.className = "alert alert-success my-5 text-center";
                                        errorWindow.innerHTML = data;
                                        setTimeout(() => {

                                            errorWindow.className = "alert alert-danger my-5 text-center d-none";

                                        }, 4500);

                                        return;

                                    }

                                    if(newvalue == "") {

                                        myInput.outerHTML = "<"+tag+" id="+idelem2+">"+"Non renseigné !</"+tag+">";
                                        let errorWindow = document.getElementById('erreur');
                                        errorWindow.className = "alert alert-success my-5 text-center";
                                        errorWindow.innerHTML = data;
                                        setTimeout(() => {

                                            errorWindow.className = "alert alert-danger my-5 text-center d-none";

                                        }, 4500);

                                    } else {

                                        myInput.outerHTML = "<"+tag+" id="+idelem2+">"+newvalue+"</"+tag+">";
                                        let errorWindow = document.getElementById('erreur');
                                        errorWindow.className = "alert alert-success my-5 text-center";
                                        errorWindow.innerHTML = data;

                                        setTimeout(() => {

                                            errorWindow.className = "alert alert-danger my-5 text-center d-none";

                                        }, 4500);
                                    
                                    }
                                    
                                } else {

                                    myInput.outerHTML = myElement;

                                }

                            }

                        });

                    });

            } else if(event.keyCode === 27) {

                myInput.outerHTML = myElement;
                return;

            }

        })
        
    }

简单的解释是：在我的用户个人资料页面上，我有用户的所有信息，每个信息旁边都有一个图标。当用户单击该图标时，包含信息的跨度将转换为输入。

我将重点放在创建的输入上。
我添加了一个均匀的监听器，所以如果输入失去焦点，它会变回一个跨度。它退出了这个功能。
我添加了另一个事件侦听器，因此如果用户输入某些内容（或不输入）然后按 Enter，那么新输入将被处理（有点像在表单中）并将输入转换回包含新数据的跨度。我还添加了一个小窗口，注意更改是否有效，在 4.5 秒后返回显示 none

问题在于，当用户按下回车键时，输入确实会转换回跨度，但包含与以前相同的数据。我在控制台中将此作为错误消息：

未捕获的 DOMException：无法在“元素”上设置“outerHTML”属性：要删除的节点不再是该节点的子节点。也许它是在“模糊”事件处理程序中移动的？

按下回车键后，我尝试删除事件侦听器，但它仍然显示此错误消息，并且当输入转换回跨度时，不会将新数据显示到跨度中。

请注意，我知道此代码不受 html 注入保护。我很匆忙地写了它，没有花时间来保护它，但我以后会的。所以，不用担心。

哦，另外，请注意，即使数据没有显示在 span 中，ajax 仍然可以正常工作，并且如果满足要求，数据库中的数据也会更改。

标签： javascripteventslistenerblurouterhtml