jquery Ajax 徽标删除在第一次 ajax 成功后不起作用 Laravel 7 jquery

Question

我正在 laravel 中编写徽标 ajax crud，它在上传时工作得很好，但是在删除一个徽标后，删除按钮停止工作我尝试了很多方法，但都在静脉，也许我犯了一个我还看不到的错误，请指导我谢谢

这是我的 blade 代码：

<div class="logos_append">
@if(count($logos)>0)
        @foreach($logos as $logo)
        <div class="m-3">
        <img class="companylogoimg img-fluid" width="100" height="50" src="{{asset('carchain_private/public/src/uploads/Logos/'.'u_'. $logo->user_id.'/'.$logo->name)}}" >
        <span data-id="{{$logo->id}}" data-name="{{$logo->name}}" data-user_id="{{$logo->user_id}}" class="btn btn-primary delete_logo">x</span>
  remove

        <!--<input type="hidden" id="logo_id" value="{{$logo->id}}">-->
        
        </div>
        @endforeach
        <input type="hidden" id="logo_count"value="{{count($logos)}}">
        @else
        {{ __('You do not have any logos')}}
        @endif
    </div>
</div>

    <!--Modal for logos -->
    
    <div id="myModal" class="modal " role="dialog">

            <div class="">

                <div class="modal-content">

                    <div class="modal-header">

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                            <span aria-hidden="true">&times;</span>

                        </button>

                        <h4 class="modal-title" align="center"><b>Crop image</b></h4>

                    </div>

                    <div class="modal-body">

                        <div id="upload-logo"></div>

                        <div class="modal-footer">

                            <div id="RotateAntiClockwise" class="btn btn-primary" title="Rotate anti-clockwise"><span class="fa fa-rotate-left"></span></div>

                            <div id="RotateClockwise" class="btn btn-primary" title="Rotate clockwise"><span class="fa fa-rotate-right"></span></div>



                            <button class="popup-btn trader-btn  btn-primary company-logo-result">{{ __('Crop & Upload')}}</button>

                        </div>

                    </div>

                </div>

            </div>

        </div>

<!--End Modal for logos-->

    <!--Delete Logo modal-->
<!-- Button trigger modal -->


<!-- Modal -->
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Delete this logo :</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <input type="hidden" id="logo_id" value="">
          <div id="modal_img"></div>
        {{ __('This logo will be deleted.')}} 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('Close')}}</button>
        <button type="button" id="delete_complete" class="btn btn-primary">{{ __('Delete Logo')}}</button>
      </div>
    </div>
  </div>
</div>
<!--End Delete Logo modal-->

这是我的 jquery 代码：

<script>
    
    $('.delete_logo').on('click', function(){
        console.log(1);
        var logo_id = $(this).data('id');
        var logo_user_id = $(this).data('user_id');
        var logo_name = $(this).data('name');
        var base_url = "{{asset('/')}}";
        var general_path = "carchain_private/public/src/uploads/Logos/u_"+logo_user_id+"/"+logo_name;
        console.log(logo_id,logo_user_id,logo_name,base_url,general_path);
        $('#logo_id').val(logo_id);
        $('#modal_img').html('<img src="'+base_url+general_path+'">');
        $('#exampleModal').show();
        

    });
    
    $('#delete_complete').on('click', function(){
       var logo_id = $('#logo_id').val();
       console.log(logo_id);
       $.ajax({
                url: "{{ route('delete_logo') }}",
                type: "POST",
                data: {logo_id:logo_id, _token: '{{csrf_token()}}'},
                datatype:'json',
                success: function (data) {
                    console.log(data);
                    $('#logos_append').html(data);
                    $('#exampleModal').hide();
                }
            });
    });
    
</script>

这是我的控制器代码：

public function delete_logo(Request $request){
        
        $logo_id = $request->logo_id;
        $user_id = Auth::user()->id;
        $path = public_path(). '/src/uploads/Logos/'.'u_'. $user_id.'/';
        $logo = Logo::where('id','=',$logo_id)->get();
        if ($logo){
            foreach ($logo as $del){
                if (\File::exists($path . $del->name)) {

                    \File::delete($path . $del->name);



                }
                $del->delete();
            }
        }
        
        $logos = Logo::where('user_id','=',$user_id)->get();
        return view('logos.logos_append',compact('logos'));
        
    }

它在控制台中没有显示任何内容，也没有来自服务器端的错误..

Answer 1

在您的 ajax 成功功能中，您正在将 html 添加到您的 logos div，因此当您下次点击 delete_logo 按钮时它会起作用，因为数据是动态添加，因此您需要将按钮与 DOM 中存在的一些静态元素绑定。即：

$(document).on("click",".delete_logo",function(){ //your code })

jquery Ajax 徽标删除在第一次 ajax 成功后不起作用 Laravel 7 jquery

jquery Ajax logo delete not working after first ajax success Laravel 7 jquery

ajax

jquery

laravel

laravel-7