等待页面上的元素存在,然后触发点击功能(纯JS)

时间:2018-10-26 22:45:37

标签: javascript

不是jQuery,香草JS。

我有以下正在使用的代码,可以在控制台内正常工作;问题是在用户爬过几个部分后,默认情况下不会立即显示“ goCheck”元素,然后它看起来是可见的;因此,事件监听器立即变为null。

当我的“ goCheck”元素在页面上可见时,如何执行此操作?

    var goCheck = document.getElementById('input_52_65_chosen');
    goCheck.addEventListener('click', function (event) {

    var value1 = document.getElementById('input_52_22').value;
    var value2 = document.getElementById('input_52_100').value;
    var value3 = document.getElementById('input_52_95').value;
    // var value4 = document.getElementById('input_52_96').value;

    if (value1 > 0 ) { 
         document.getElementById('rate').style.display = "none";
         document.getElementById('pay-plans').style.display = "none";
         document.getElementById('field_52_116').style.display = "none";

      } else if (value1 === 0 ) { 
        document.getElementById('field_52_116').style.display = "block";
    }
    if (value2 > 0 ) { 
         document.getElementById('rate').style.display = "none";
         document.getElementById('pay-plans').style.display = "none";
         document.getElementById('field_52_116').style.display = "none";

    } else if (value2 === 0 ) { 
        document.getElementById('field_52_116').style.display = "block";
    }
    if (value3 > 0 ) { 
         document.getElementById('rate').style.display = "none";
         document.getElementById('pay-plans').style.display = "none";
         document.getElementById('field_52_116').style.display = "none";

      } else if (value3 === 0 ) { 
        document.getElementById('field_52_116').style.display = "block";
    }
    if (value1 && value2 && value3 == 0 ) { 
        document.getElementById('field_52_116').style.display = "block";
    }   
  }
); 

1 个答案:

答案 0 :(得分:3)

收听所有地方的每次点击,然后检查是否找到了您要查找的元素:

document.body.addEventListener("click", function(event){
  const goCheck = document.getElementById('input_52_65_chosen');
  let el = event.target;
  while(el && el !== goCheck) el = el.parentElement;
  if(!el) return;
  //...
});