Javascript 无法删除/更新ajax laravel中的新项目

我在删除crud中的新项时遇到问题，对于旧数据它可以工作，但是对于新添加的项它不能。这是我的密码

形式

我有一个写警报，它没有显示值id，代码有什么问题

---

Laravel是一个免费、开源的PHP web框架，由Taylor Otwell创建，旨在按照model–view–controller架构模式并基于Symfony开发web应用程序。

页面加载时指定的选择器和事件处理程序将仅匹配页面加载时存在的元素。您在页面加载后添加新元素，而您的事件侦听器将不匹配它们-jQuery不知道这些新元素。您需要将处理程序委托给加载时存在的元素，并进行筛选以仅匹配目标元素。这是一个非常常见的问题，这里有许多重复和变化。这能回答你的问题吗？

@foreach ($campaigns as $campaign)
    <tr id="campaign{{ $campaign->campaign_id }}">
        <td id="campaign_no">{{ $loop->iteration }}</td>
        <td id="td-campaign-{{ $campaign->campaign_id }}">{{ $campaign->campaign_name }}</td>
        <td>{{ $campaign->created_at }}</td>
        <td><span class="badge badge-success">{{ $campaign->status }}</span></td>
        <td>
            <button class="btn btn-icon btn-warning btn-icon-style-1 btn-xs"><span class="btn-icon-wrap"><i class="icon-rocket"></i></span></button> 
            <button class="btn btn-icon btn-secondary btn-icon-style-1 btn-xs open-modal" value="{{ $campaign->campaign_id }}" ><span class="btn-icon-wrap"><i class="fa fa-pencil"></i></span></button>  
            <button class="btn btn-icon btn-danger btn-icon-style-1 btn-xs delete-modal" data-toggle="modal" data-target="#purchaseModal" value="{{ $campaign->campaign_id }}"><span class="btn-icon-wrap"><i class="fa fa-trash"></i></span></button> 
        </td>
   </tr>                           
@endforeach

<div class="modal fade" id="purchaseModal" tabindex="-1" role="dialog" aria-labelledby="purchaseLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title" id="purchaseLabel">Delete Confirmation</h4>
        </div>
        <div class="modal-body">
            Are you sure?
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-danger delete-link" id="delete-now" value="">Delete</button>
        </div>
    </div>
</div>

$("#btn-save").click(function (e) {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
        }
    });
    e.preventDefault();
    var formData = {
        campaign_name: jQuery('#campaign_name').val(),
    };
    var state = jQuery('#btn-save').val();
    var type = "POST";
    var link_id = jQuery('#link_id').val();
    var ajaxurl = 'campaign/save';
    if (state == "Update") {
        type = "POST";
        ajaxurl = 'campaign/update/'+link_id;
       //alert('update detected');
    }
    $.ajax({
        type: type,
        url: ajaxurl,
        data: formData,
        dataType: 'json',
        success: function (data) {

               if (state == "add") {


            var link = '<tr id="link' + data.id + '">';
            link += '<td>' + $('#increment').val() + '</td><td>' + data.campaign_name + '</td><td>Few moments ago</td><td><span class="badge badge-success">' + data.status + '</span></td>';
            link += '<td><button class="btn btn-icon btn-warning btn-icon-style-1 btn-xs"><span class="btn-icon-wrap"><i class="icon-rocket"></i></span></button> <button class="btn btn-icon btn-secondary btn-icon-style-1 btn-xs"><span class="btn-icon-wrap"><i class="fa fa-pencil"></i></span></button>  <button class="btn btn-icon btn-danger btn-icon-style-1 btn-xs delete-modal" data-toggle="modal" data-target="#purchaseModal" value="'+data.id+'"><span class="btn-icon-wrap"><i class="fa fa-trash"></i></span></button> </td>';

            jQuery('#campaign-list').append(link);
            $.toast({
                text: '<i class="jq-toast-icon ti-check-box"></i><p>Added successfully!</p>',
                position: 'bottom-right',
                loaderBg:'#7a5449',
                class: 'jq-has-icon jq-toast-success',
                hideAfter: 3500, 
                stack: 6,
                showHideTransition: 'fade'
              });
            } else {
                $.get('campaign/edit/' + link_id, function (data) {

                     $('#td-campaign-'+link_id).html(data[0].campaign_name);
                     $.toast({
                        text: '<i class="jq-toast-icon ti-check-box"></i><p>Changes saved!</p>',
                        position: 'bottom-right',
                        loaderBg:'#7a5449',
                        class: 'jq-has-icon jq-toast-success',
                        hideAfter: 3500, 
                        stack: 6,
                        showHideTransition: 'fade'
                      });
                 //  $("#campaign" + link_id).replaceWith(newx);

                })




            }
            jQuery('#modalFormData').trigger("reset");
            jQuery('#linkEditorModal').modal('hide');
        },
        error: function (data) {
            alert('Failed');
            console.log('Error:', data);
        }
    });
});

jQuery('.delete-modal').click(function () {
    var link_id = $(this).val();
    alert(link_id); //the return is null, but for old item its not.
    jQuery('#delete-now').val(link_id);

});

////----- DELETE a link and remove from the page -----////
jQuery('.delete-link').click(function () {
    var link_id = $(this).val();
    alert(link_id); //the return is null, but for old item its not.
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type: "DELETE",
        url: 'campaign/delete/' + link_id,
        success: function (data) {
            console.log(data);
            $("#campaign" + link_id).remove();
            jQuery('#purchaseModal').modal('hide');
            $.toast({
                text: '<i class="jq-toast-icon ti-check-box"></i><p>Deleted successfully!</p>',
                position: 'bottom-right',
                loaderBg:'#7a5449',
                class: 'jq-has-icon jq-toast-success',
                hideAfter: 3500, 
                stack: 6,
                showHideTransition: 'fade'
              });
              location.reload();
        },
        error: function (data) {
            console.log('Error:', data);
        }
    });
});

Route::delete('/campaign/delete/{link_id?}', function ($link_id) {
    $campaign = Campaign::where('campaign_id',$link_id)->delete();
    return Response::json($campaign);
});