Javascript 函数在单击后运行两次

我目前正在从事一个项目，该项目利用输入创建项目列表。我有工作的程序添加，但删除一个项目是我有问题的地方。 项目通过.push（）添加到数组中，删除方法是通过.splice（）方法。该函数正确拼接正确的数组元素，但最后执行第二次传递并删除之前的元素。如何防止拼接发生多次

$(skill_add_button).click(function(e){ //on add input button click
        var skill_input=document.getElementById("skill_input").value;
        document.getElementById("skill_input").value = "";
        e.preventDefault();
        if(s < 12){ //max input box allowed
            if (skill_input==""){
                skillset = skill_arr.join('');
                alert(skillset);
            } else {
                s++; //text box increment
                $(skill_wrap).append('<div class="skill_tag" id="skill_tag'+s+'">'+skill_input+'</div>'); //add input box
                skill_arr.push(skill_input+'|s|');

                alert(skill_arr);
                $('.skill_tag').hover(function(){
                        $(this).css("background-color", "#C14330");
                        $(this).css("cursor", "pointer");
                        }, function(){
                        $(this).css("background-color", "#04CA29");
                    });
                $('.skill_tag').click(function() {
                    var skill_id = $(this).attr('id');
                    var index = skill_id.split('skill_tag').pop();
                    skill_arr.splice(index,1);
                    $('#'+skill_id).remove();
                    alert(skill_arr);
                    s--;
                });
            }
        } 
        if(s > 11) {
                $(skill_add_button).remove();
         }
    });

$（技能添加按钮）。单击（功能（e）{//在添加输入按钮上单击
var skill\u input=document.getElementById（“skill\u input”）.value；
document.getElementById（“技能输入”）.value=“”；
e、 预防默认值（）；
如果（s<12）{//允许使用最大输入框
如果（技能输入==“”）{
skillset=技能加入（“”）；
警报（技能集）；
}否则{
s++；//文本框增量
$（skill_wrap）.append（“”+skill_input+“”）；//添加输入框
技能推送（技能输入+s）；
警觉（技能）；
$（'.skill_标记'）。悬停（函数（）{
$（this.css（“背景色”，“#C14330”）；
$（this.css（“游标”、“指针”）；
}，函数（）{
$（this.css（“背景色”，“#04CA29”）；
});
$（'.skill_标记'）。单击（函数（）{
var skill_id=$（this.attr（'id'）；
var index=skill_id.split（'skill_tag'）.pop（）；
拼接技巧（索引1）；
$（'#'+skill_id）.remove（）；
警觉（技能）；
s--；
});
}
} 
若（s>11）{
$（技能添加按钮）.remove（）；
}
});

---

如果我尝试将我的.skill\u标签单击功能置于我的skill\u添加功能之外，则它根本不起作用。

每次单击

$（skill\u添加按钮）

时，您将创建一个新的

div.skill\u标签

，然后在页面的所有

.skill\u标签

元素上添加.click事件

$('body').on('click','.skill_tag',function(){
   //TODO::add code here
})

将生成的div保存到var中，并使用此var添加click事件

var myDiv = '<div class="skill_tag" id="skill_tag'+s+'">'+skill_input+'</div>';
$(skill_wrap).append(myDiv); //add input box
[...]
myDiv.hover(function(){
[...]
myDiv.click(function(){

var myDiv=''+技能输入+''；
$（skill\u wrap）.append（myDiv）//添加输入框
[...]
myDiv.hover（函数（）{
[...]
myDiv.click（函数（）{
可能冒泡吗？你试过StPosi流传了吗？不，我不知道冒泡的问题是什么？你也可以发布你的HTML代码吗？冒泡是一个不止一次的事件；在某些情况下，你必须说，“这就够了。停下来。考虑一下这件事/完成了”。。这就是使用StopRopAgation的时候。我在代码中添加了StopRopAgation行，但它仍在执行多次。