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

每次点击<key>VMOptions</key> <string>-Xms16m -Xmx512m -XX:MaxPermSize=120m -Xbootclasspath/p:../lib/boot.jar -ea -Dconsole.encoding=UTF-8 -Dfile.encoding=UTF-8 </string>，您都会创建一个新的$(skill_add_button)，但您会在页面的所有div.skill_tag元素上添加.click事件。

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

.skill_tag

单击后函数运行两次

2 个答案: