工作中埋码需求,当某些动态插入的元素出现时触发埋码事件,因此需要对插入元素的父节点进行监听,子节点发生变化时触发相应埋码逻辑。
方法一:
(function () {//事件触发时执行埋码内容function do_track() {if ($("#LXB_CONTAINER > ins.lxb-cb-tip.lxb-cb-tip-feedback > ins.lxb-cb-tip-con > ins.success-tip-phone") && eventflag) {//ptengine event api,用户可以自定义eventName_pt_sp_2.push('setCustomEvent', {eventName: '事件名称',isActiveElement: 1});eventflag = false;if (timer) { clearInterval(timer) }}}try {var eventflag = true;var message_box = document.querySelector("#va");//以下代码为监控整个Body元素的变化var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;if (MutationObserver) {var MutationObserverConfig = {childList: true,subtree: true,};var observer = new MutationObserver(function (mutations) {do_track();});observer.observe(message_box, MutationObserverConfig);}else if (message_box.addEventListener) {message_box.addEventListener("DOMSubtreeModified", function (evt) {do_track();}, false);}else {var timer = setInterval(function () {do_track();}, 1000)}} catch (error) {}})()
方法二(监听元素属性值的变化触发相应逻辑):
//listener active element attribute changefunction eventBinding(){try{$('.js-dlpo_modal-open').on('click', function() {$('.js-dlpo_modal').fadeIn();return false;});var targetNode = document.querySelector('#popup-dlpo01');//options listener modelvar options = { attributes: true, childList: true,subtree:true,attributeOldValue:true};var flag = true;//callback for MutationObserverfunction callback(mutationsList, observer) {if(document.querySelector('.js-dlpo_modal').style.display == 'block' && flag){$('.js-dlpo_modal-close').on('click', function() {$('.js-dlpo_modal').fadeOut();return false;});flag = false;}else if(document.querySelector('.js-dlpo_modal').style.display == 'none'){flag = true;}}var mutationObserver = new MutationObserver(callback);if(targetNode){mutationObserver.observe(targetNode, options);}}catch(e){console.log('pterror:'+e)}}