如何在ajax内容发生变化时调用函数?

时间:2018-01-21 21:40:11

标签: javascript jquery ajax shopify

所以我正在shopify网站上工作并坚持编写脚本,情况是安装了插件以在网站上插入评论,任务是让每个用户都有一个“经过验证的买家”标记在用户名之后,即使它不是经过验证的用户,因为真正验证的用户通过插件有标记,作业是在每个用户期望已经拥有它之后插入它,我能够使用这个脚本 -

$(document).ajaxStart(function(){

function addVerified(){

    var list=document.querySelectorAll('display-wrapper .nav-content .reviews-active .review');
    for(let li of list){

        if(!li.classList.contains('hidden')&& (!li.firstElementChild.classList.contains('verified-buyer'))){
            let needElem=li.firstElementChild.children[1].firstElementChild;
            needElem.insertAdjacentHTML('afterend','<div class="label-with-tooltip pull-left">  <span class="y-label>Verified Buyer</span>   </div>'); 

        }
    }
}

addVerified();

});

当使用评论下方的分页,内容更改和评论更改以及功能不起作用从而使经过验证的买方标签被删除时,一切正常,我尝试了DOMSubtreeModified(使脚本陷入无限循环), ajaxComplete来执行这个功能,但到目前为止还没有任何工作,我对javascript的了解还不多,我还在学习,在过于沮丧后我决定在这里发布。请帮忙

1 个答案:

答案 0 :(得分:0)

好的......剩下的标记我可以提出一些建议。

这是对客户的谎言......我不喜欢这样。

但无论如何,这是调整它的方法:

// Create the element to insert
var fake_verified_buyer = $('<div class="label-with-tooltip pull-left">  <span class="y-label yotpo-user-title yotpo-action-hover" data-type="toggleFade" data-target="yotpo-tool-tip">Verified Buyer</span>  <div class="yotpo-tool-tip yotpo-animation-fade" data-user-type="yotpo-verified-buyer"> <div class="tool-tip-header"> <span>What is a</span> <span class="header-green">Verified Buyer</span> </div> <div class="tool-tip-content"> A Verified Buyer is a user who has purchased the reviewed product through our store. </div> </div> </div>');

// On pagination click, insert that element after each user name, if not already present.
$(document).on("click",".yotpo-pager",function(){
  setTimeout(function(){
    $(document).find(".yotpo-user-name").each(function(){
      if(!$(this).next().is(".label-with-tooltip")){

        var clone = fake_verified_buyer.clone();
        clone.insertAfter(this);
      }
    });
  },100);
});