Javascript 使用append（）函数显示ajax成功后的通知

我想在ajax成功和失败函数之后显示一个通知。我用append（）函数和delay函数在它附加到父div之后显示通知。但是现在的问题是它只触发一次。我希望在每次完成ajax时触发通知

function addDroppedCandidates(data){

var data = JSON.parse(data);
//alert(data.msg.name);

if (data.msg == "no_int") {

    $('#no_int_modal').modal('show');
}
else {

    var name = data.msg.name.substring(0,6);
var profile_name = "{{$profile->profile_name}}"
console.log(data.resume);

$('.notification_panel_parent').append('<div class = "panel notification_panel" id = "">'+

    '<div class = "panel-body">'+
     '<div class="col-lg-4">'+
         '<img id = "notify_file" src="/icons/pdf_success.png">'+
     '</div>'+

        '<div class="col-lg-8 name_and_info">'+

            '<span class = "notify_cand_name">'+resume_name+'</span>'+
            '<span class="file_status">File upload successfull</span>'+

        '</div>'+

    '</div>'+
  '</div>').delay(1200).fadeOut(4000); 
  }
  }

另一个问题是，当它淡出ou时，它会低于其他div（z-index在这里不起作用）

这是我的ajax函数

$.ajax({


        url : '/resume_upload',
        contentType: "application/json",
        type : 'POST',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        mimeType: "multipart/form-data",
        data : form_data,

        success : function(data) {
        addDroppedCandidates(data);                                       
        },
        processData : false,
        contentType : false,
        error : function(xhr ,status ,error){
        console.log(xhr);
        alert(xhr);
        }

        });
        e.preventDefault();
        e.stopImmediatePropagation();
        }

---

你应该做一些类似的事情，而不是逐渐淡出

.delay(2000).html('')

或

我还没试过，所以可能没用。但是试试这个，如果他们不告诉我，我会看看到底是什么问题

---

更新

好的，那么我从你的问题中理解了什么，如果我错了，请纠正我

• 您希望在每次成功的AJAX调用之后显示一个通知
• 为此，您创建了一个函数，

  在
  notification\u panel\u parent
  id中追加一个面板

• 然后，在4秒钟后，将子面板淡出

现在，我在这个方法中看到了这些问题

• 每次AJAX成功后，您都会添加一个新面板，我不确定您是否再次使用以前添加的面板（如果我错了，请告诉我）
• 这将添加意外行为，因为您的DOM中将有多个子面板

我相信你能做的就是在“开始”中创建一个面板来显示用户，然后使其

opacity

0

然后，在每次成功的AJAX调用之后，只需将其不透明度设置为1，在延迟4秒后，使用

fadeIn和faaeOut

函数再次将其不透明度设置为0

大概是这样的：

$（'#子面板'）.css（{opacity:1}）；
setTimeout（函数（）{
$（“#子面板”）。延迟（1000）。淡出（2000）
},2000);
#子面板{
不透明度：0；背景：紫色；高度：75px；宽度：75px；边距：6px；
}

你能展示你的AJAX调用函数吗？@myke_11j编辑你可以看到AJAX函数每次AJAX成功完成时，成功回调都会触发。你确定你的AJAX是第二次发射吗？是什么触发了AJAX调用？是的，每次都会触发AJAX。但是我没有触发通知。FileDropping事件触发第一个ajax调用您没有提到您如何知道每次都会触发ajax？FileDroping会触发第一次调用，第二次和以后呢？触发它的代码在哪里？这将隐藏整个面板，并且不会在第一个面板上显示面板。@NaveenKumar请检查更新的答案。让我知道这是否解决了你的问题。
$.ajax({


        url : '/resume_upload',
        contentType: "application/json",
        type : 'POST',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        mimeType: "multipart/form-data",
        data : form_data,

        success : function(data) {
        addDroppedCandidates(data);                                       
        },
        processData : false,
        contentType : false,
        error : function(xhr ,status ,error){
        console.log(xhr);
        alert(xhr);
        }

        });
        e.preventDefault();
        e.stopImmediatePropagation();
        }

.delay(2000).html('')

.delay(2000).fadeOut(3000).html('')