单击后函数运行两次

Question

我目前正在从事一个利用输入来创建项目列表的项目。我添加了一些程序，但是删除一个项目是我遇到问题的地方。这些项目通过 .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();
         }
    });

如果我尝试将我的 .skill_tag 点击功能放在 skill_add_function 之外，它根本不起作用。

Answer 1

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

Answer 2

每次点击 $(skill_add_button) 都会创建一个新的 div.skill_tag 但同时会在页面的所有 .skill_tag 元素上添加 .click 事件。

将您生成的 div 保存到一个变量中，并使用此变量添加点击事件。

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(){

单击后函数运行两次

Function runs twice after click

javascript

jquery

arrays

splice