javascript中 一个 click 事件里面 还包含有其他事件, 被包含的事件却重复触发了?

Question

我在一个 click 事件里面执行了这样一段代码:
点击一个事件 就添加一行 html 元素, 每添加的这个html元素都绑定有一个 keyup事件, 当输入文本的时候就即时输出被输入的文本,, 当时问题出在, 如果我添加了 两行html 元素, 那么 添加的第一行会输出两次, 第二行输出一次, 如果添加了三行, 第一行会输出三次....第二行两次..第三行一次...

代码:

// 声明总板块空数组
var zbk_arr=[];
// 声明 tr 的 自增 id 用于标识每一行 tr
var tr_id=0;
// 点击添加规格的按钮的时候
$("#attr_guige_btn").click(function(){
    // 获取规格
    var attr_guige_val=$("#attr_guige_val").val();
    if(attr_guige_val==""){
        alert("请输入规格!");
    }else{
        // 获取属性名称
        var attr_name=$("#attr_name").val();
        // 获取属性值
        var select_show_val=$("#select_show").val();
        // 获取规格
        var attr_guige_val=$("#attr_guige_val").val();
        // 显示添加属性后的总板块
        $(".add_product_attr_content_2").css("display","block");
        // 获取总板块
        var zbk_big=$(".add_product_attr_content_2>table>tbody");

        // 获取表格的最后一行 tr 根据这个 tr 来判断规格是否有重复(因为初始只有表头,用户添加第一行 tr 后等于是当前的最后一行 tr)
        if($(".add_product_attr_content_2>table>tbody>tr:last-child>td:nth-child(3)").text()==attr_guige_val){
            alert("每个属性值只能添加一种规格哦!");
        }else{
        // id 自增
        tr_id++;

        zbk_arr.push({"tr_id":tr_id,"product_attr_name":attr_name,"product_attr_val":select_show_val,"product_attr_guige":attr_guige_val,"attr_price":"","attr_vip_price":"","attr_kucun":""});
        console.log(zbk_arr);

        var zbk_html="";
        // 遍历
        for(x in zbk_arr){
            zbk_html=`
                    <tr data-tr_id=${zbk_arr[x].tr_id}>
                        <td><a>${zbk_arr[x].product_attr_name}</a></td>
                        <td><a>${zbk_arr[x].product_attr_val}</a></td>
                        <td><a>${zbk_arr[x].product_attr_guige}</a></td>
                        <td><input type="text" name="" placeholder="0.00" class="zbk_price"></td>
                        <td><input type="text" name="" placeholder="0.00" class="zbk_vip_price"></td>
                        <td><input type="text" name="" class="zbk_kucun"></td>
                        <td><button class="zbk_submit">提交</button><button class="zbk_delete_btn">删除</button></td>
                    </tr>
                `;
        }

        zbk_big.append(zbk_html);

            $(".zbk_price").keyup(function(){
                console.log($(this).val());
            })
            $(".zbk_vip_price").keyup(function(){
                console.log($(this).val());
            })
        }    
    }
})

如何阻止click内部的事件重复执行? 一开始以为是冒泡, 阻止冒泡后没有任何效果..(┬＿┬)

Answer 1

 $(".zbk_price").off('keyup')
 $(".zbk_vip_price").off('keyup')

 $(".zbk_price").keyup(function(){
    console.log($(this).val());
 })
 $(".zbk_vip_price").keyup(function(){
    console.log($(this).val());
 })

这段代码导致每添加一行html，就给类名包含zbk_price或者zbk_vip_price的元素绑定了keyup事件，也就是说重复绑定了，重复绑定并不会覆盖之前绑定的事件，而是会都执行。