Question

我不知道那里发生了什么。 [ 在这里，当我更新记录模式时，你会看到动作中的编辑按钮（铅笔）。

当您点击编辑（铅笔）按钮时，模态将会打开。

当我第一次更新记录时，其工作正常并且ajax运行一次。当我再次更新记录ajax运行两次并再次更新记录ajax运行三次。每当我更新记录时，ajax运行增加这是我的代码： - Button的Html代码

enter code here
<button  type="button" class="btn btn-info btn-edit editService"><i class="fa fa-pencil" aria-hidden="true"></i></button>// this button in foreach loop

我的模态： -

enter code here
<div class="modal fade" id="myModal-edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <form id="subservicedata" role="form" method="POST" action="Javascript:;">
            {{ csrf_field() }}
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="add-cat">Edit Service</h4>
        </div>
        <div class="modal-body">
            <div class="form-group row">
                <span class="col-xs-3 add-cate-model">Service</span>
                <div class="col-xs-8">
                    <input name="name"  id="sname" class="form-control txtfield m-tb-10" type="text" placeholder="Service" value="">
                    <input type="hidden" name="id" id="id" value="">
                    <input type="hidden" name="serviceid" id="service_id" value="">
                    <input type="hidden" name="listid" id="list_id" value="">
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary editSubService">Submit</button>
        </div>
        </form>
    </div>
</div>

我的Jquery代码： -

enter code here
$(document).on ('click','.editService',function(){
    var tdid = $(this).parents().parents().attr('id');
    var service = tdid.split('-');
    var subserviceid = service[1];
    alert(subserviceid);
    $.ajax({
        type : "POST",
        url  : "get-service",
        data : { id: subserviceid },
        dataType: 'json',
        success:function(resp){
            if($.trim(resp)){
                $('#myModal-edit').modal('show');
                $('#sname').val(resp.name);
                $('#id').val(resp.id);
                $('#service_id').val(resp.service_id);
                $('#list_id').val(resp.list_id);
                $(document).on('click','.editSubService',function(){
                    $.ajax({
                        type : "post",
                        url  : "edit-sub-service",
                        data : $("#subservicedata").serialize(),
                        success:function(resp){
                            if($.trim(resp)){
                                alert(resp); 
                                alert(subserviceid);
                                $('#tr-'+subserviceid+' #tdid-'+subserviceid).html(resp);
                                $('#myModal-edit').modal('hide');
                            }else{
                                alert("Error"); return false;
                            }
                        },
                        error:function(){
                            alert("Something Went Wrong!");
                        }
                    });
                });
            } else{
                alert("Failed"); return false;
            }
        }
    });
});

我的laravel 5.2功能

enter code here
public function getCategoryService(Request $request){
    if($request->ajax()){
        $data = $request->all();
        $servicedata= DB::table("session_subservices")->where('id',$data['id'])->first();
        echo json_encode($servicedata);die;
    }
}

public function editCategoryService(Request $request){
    if($request->ajax()){
        $data = $request->all();
        //echo "<pre>"; print_r($data); die;
        SessionSubservice::where('id', $data['id'])->update(array('name' =>$data['name']));
        echo  $data['name']; die;
    }
}

Answer 1

问题是每次单击按钮时都会附加一个新事件。

如果您想保留您的方法，则需要删除第一个事件。

更改此$(document).on ('click','.editSubService',function(){ 对此：

$(document).off('click').on('click','.editSubService',function(){

其他方法是在你的js中创建一个函数并将其设置为在html中调用。

Answer 2

问题是.editSubSerice点击处理程序：

$(document).on('click','.editSubService',function(){
   ...
}

您正在ajax调用的success函数中添加此单击处理程序，该函数是另一个单击处理程序的一部分，因此每次执行ajax调用/单击处理程序时，您都会添加一个额外的单击处理程序，这会导致代码执行多次。

您应该将该单击处理程序移动到您的其他单击处理程序之后（或之前...），以便它只被调用/绑定一次。

停止ajax运行n次

2 个答案: