Javascript 按钮多次点击

我想制作一个编辑帖子的按钮，在第一次编辑之后，我想能够通过按下按钮一次又一次地编辑帖子，我通过再次调用函数（函数1）实现了这一点。问题是程序不知何故记住了每次按下（我想），每次我编辑一篇文章（没有刷新页面）时，程序都会调用我的函数（函数1），因为我以前每次按下按钮。我会在图片中显示

这里有3张图片：[图片]：（）

第一个是我第一次编辑的时候，第二个是在第二次编辑之后，第三个是在我再编辑我的文章两次之后， 通知显示调用函数的时间以及调用脚本中的函数链的时间，显示我按编辑按钮的次数。。 就这样..对于这篇长文章，我希望有人能找到bug

我希望编辑一篇文章多少次，而不是每次按下编辑按钮都运行功能1；我是JS的乞丐，我用了一个星期，现在我卡住了

另外，我正在使用codeigniter php框架作为后端

<?php foreach ($exit as $a)
    { if( $a['endpoint_id'] === $id)
    { ?>
    <ul class=" list-group">
         <li class="list-group-item col-md-12" style="display: inline;" id="urllist<?php echo $a['id']?>" > 
            <div id="showUrl<?php echo $a['id'];?>" style="display:block" data-myValue="<?php echo $a['exit_url'];?>">             
                <p id="urlText<?php echo $a['id'];?>" > <?php echo $a['exit_url']; echo PHP_EOL; ?> </p> 
             </div>
            <div style="margin-right:1px;" id="Div<?php echo $a['id'];?>" >
                 <input type="hidden" value=<?php echo $a['id'] ?> id='<?php echo $a['id'];?>'>
                 <button onclick="function1(<?php echo $a['id']; ?>); " class="btn btn-primary" id="btn<?php echo $a['id']?>" >Edit</button> 
                 <button onclick="function2(<?php echo $a['id']; ?>)" class="btn btn-primary" > Delete </button> 

            </div>
         </li>
    </ul>
<?php 
    }   
} ?>

function function1(id) {

        //$("#btn"+id).prop("onclick",null); //removing onclick event for  avoiding the bug :'()

        if($("#update_url"+id).length) {
            $("#update_url"+id).show();
            $("#submit_update"+id).show();
        }
         else {
            $("#Div"+id).append($('<input type="text">').attr('id',"update_url"+id).attr('value',$("#showUrl"+id).attr('data-myValue'))); //make input text
            $("#Div"+id).append($('<input type="submit">').attr('value','Update').attr('id','submit_update'+id)); //make input submit and apend them      
         }

        $("#submit_update"+id).click(function() {
            update_url(id);
       });    
    }

//sending updated url to controller(db)
function update_url(id) {
    $(document).ready(function() {
    var deca =  $("#update_url"+id).val();

    $.ajax({
             type: "POST",
             url:  "<?php echo base_url(); ?>endpoint/update_url1",
             data: 'value1='+deca+'&value2='+id,
            success: function(data){
                $.notify("Update successfully","success");
                $("#submit_update"+id).click(show_update_url(id));
                $("#submit_update"+id).hide();
                $("#update_url"+id).hide();
            }
        });
    });
    }

//show updated exit url after edit press
function show_update_url(id) {
        $(document).ready(function() {
            $.ajax(
            {
                type: "GET",
                url: "<?php echo base_url();?>endpoint/new_url/"+id,
                success : function(text)
                {
                    if($("#phehe"+id).length) {
                        $("#phehe"+id).hide();
                    }

                    //alert(text);
                    $("#Div"+id).prepend($('<p>'+text+'</p>').attr('id','phehe'+id));

                }
            });
        });
        $("#urlText"+id).css("display","none");
    }

id=''>
每次使用
时，jQuery事件绑定都会附加到事件中。单击（…）
或
。打开（…）
。在function1（）中，每次通过编辑按钮调用函数时，都会绑定
“#submit_update”+id
元素上的单击事件。快速修复方法是通过调用
$（“#提交更新”+id）.off（'click'）
解除function1（）中事件的绑定

另一种方法是将事件绑定到事件堆栈本身之外。基本上，您不希望在事件中绑定新事件

像这样的。这没有经过测试

<?php foreach ($exit as $a)
    { if( $a['endpoint_id'] === $id)
    { ?>
    <ul class=" list-group">
         <li class="list-group-item col-md-12" style="display: inline;" id="urllist<?php echo $a['id']?>" > 
            <div id="showUrl<?php echo $a['id'];?>" style="display:block" data-myValue="<?php echo $a['exit_url'];?>">             
                <p id="urlText<?php echo $a['id'];?>" > <?php echo $a['exit_url']; echo PHP_EOL; ?> </p> 
             </div>
            <div style="margin-right:1px;" id="Div<?php echo $a['id'];?>" >
                 <input type="hidden" value=<?php echo $a['id'] ?> id='<?php echo $a['id'];?>'>
                 <button class="btn btn-primary btn-edit" data-id="?php echo $a['id']?>" id="btn<?php echo $a['id']?>" >Edit</button> 
                 <button onclick="function2(<?php echo $a['id']; ?>)" class="btn btn-primary" > Delete </button> 

            </div>

         </li>
    </ul>
<?php 
    }   
} ?>


$('.btn-edit').click(function() {
    const id = $(this).data('id');

    if($("#update_url"+id).length) {
            $("#update_url"+id).show();
            $("#submit_update"+id).show();
        }
         else {
            $("#Div"+id).append($('<input type="text">').attr('id',"update_url"+id).attr('value',$("#showUrl"+id).attr('data-myValue'))); //make input text
            $("#Div"+id).append($('<input type="submit">').class('btn-update').attr('value','Update').attr('id','submit_update'+id).data('id', id); //make input submit and apend them      
         }
});

$('.btn-update').on('click', function() {
    const id = $(this).data('id');

    update_url(id);
});

function update_url(id) {
    $(document).ready(function() {
    var deca =  $("#update_url"+id).val();

    $.ajax({
             type: "POST",
             url:  "<?php echo base_url(); ?>endpoint/update_url1",
             data: 'value1='+deca+'&value2='+id,
            success: function(data){
                $.notify("Update successfully","success");

                show_update_url(id);

                $("#submit_update"+id).hide();
                $("#update_url"+id).hide();
            }
        });
    });
    }

//show updated exit url after edit press
function show_update_url(id) {
        $(document).ready(function() {
            $.ajax(
            {
                type: "GET",
                url: "<?php echo base_url();?>endpoint/new_url/"+id,
                success : function(text)
                {
                    if($("#phehe"+id).length) {
                        $("#phehe"+id).hide();
                    }

                    //alert(text);
                    $("#Div"+id).prepend($('<p>'+text+'</p>').attr('id','phehe'+id));

                }
            });
        });
        $("#urlText"+id).css("display","none");
    }




id=''>
每次使用
时，jQuery事件绑定都会附加到事件中。单击（…）
或
。打开（…）
。在function1（）中，每次通过编辑按钮调用函数时，都会绑定
“#submit_update”+id
元素上的单击事件。快速修复方法是通过调用
$（“#提交更新”+id）.off（'click'）
解除function1（）中事件的绑定

另一种方法是将事件绑定到事件堆栈本身之外。基本上，您不希望在事件中绑定新事件

像这样的。这没有经过测试

<?php foreach ($exit as $a)
    { if( $a['endpoint_id'] === $id)
    { ?>
    <ul class=" list-group">
         <li class="list-group-item col-md-12" style="display: inline;" id="urllist<?php echo $a['id']?>" > 
            <div id="showUrl<?php echo $a['id'];?>" style="display:block" data-myValue="<?php echo $a['exit_url'];?>">             
                <p id="urlText<?php echo $a['id'];?>" > <?php echo $a['exit_url']; echo PHP_EOL; ?> </p> 
             </div>
            <div style="margin-right:1px;" id="Div<?php echo $a['id'];?>" >
                 <input type="hidden" value=<?php echo $a['id'] ?> id='<?php echo $a['id'];?>'>
                 <button class="btn btn-primary btn-edit" data-id="?php echo $a['id']?>" id="btn<?php echo $a['id']?>" >Edit</button> 
                 <button onclick="function2(<?php echo $a['id']; ?>)" class="btn btn-primary" > Delete </button> 

            </div>

         </li>
    </ul>
<?php 
    }   
} ?>


$('.btn-edit').click(function() {
    const id = $(this).data('id');

    if($("#update_url"+id).length) {
            $("#update_url"+id).show();
            $("#submit_update"+id).show();
        }
         else {
            $("#Div"+id).append($('<input type="text">').attr('id',"update_url"+id).attr('value',$("#showUrl"+id).attr('data-myValue'))); //make input text
            $("#Div"+id).append($('<input type="submit">').class('btn-update').attr('value','Update').attr('id','submit_update'+id).data('id', id); //make input submit and apend them      
         }
});

$('.btn-update').on('click', function() {
    const id = $(this).data('id');

    update_url(id);
});

function update_url(id) {
    $(document).ready(function() {
    var deca =  $("#update_url"+id).val();

    $.ajax({
             type: "POST",
             url:  "<?php echo base_url(); ?>endpoint/update_url1",
             data: 'value1='+deca+'&value2='+id,
            success: function(data){
                $.notify("Update successfully","success");

                show_update_url(id);

                $("#submit_update"+id).hide();
                $("#update_url"+id).hide();
            }
        });
    });
    }

//show updated exit url after edit press
function show_update_url(id) {
        $(document).ready(function() {
            $.ajax(
            {
                type: "GET",
                url: "<?php echo base_url();?>endpoint/new_url/"+id,
                success : function(text)
                {
                    if($("#phehe"+id).length) {
                        $("#phehe"+id).hide();
                    }

                    //alert(text);
                    $("#Div"+id).prepend($('<p>'+text+'</p>').attr('id','phehe'+id));

                }
            });
        });
        $("#urlText"+id).css("display","none");
    }




id=''>
onclick不是propand，这意味着什么？@Hyperion这意味着它不是一个有效的属性，您可能可以在调用函数之前使用
.unbind（）
解除click事件的绑定。onclick不是propand，这意味着什么？@Hyperion这意味着它不是一个有效的属性，您可能可以使用
.unbind（））
在调用函数之前解除单击事件的绑定。我已经做了更改，但其作用相同。。。当我尝试第二次编辑，第三次不刷新页面时，那些负责显示编辑和更新\u url输入的函数，show\u update\u url运行两次，分别运行三次。但是问题是bcs我的按钮一直在“提醒”所有的按下和运行…这是正确的行为吗？我做了更改，但它的行为是一样的。。。当我尝试第二次编辑，第三次不刷新页面时，那些负责显示编辑和更新\u url输入的函数，show\u update\u url运行两次，分别运行三次。然而问题是bcs我的按钮一直在“提醒”所有的按下和运行..这是正确的行为吗？