Question

如果此元素使用jquery存在<div id="element">Some text</div>，我想执行一些代码。

我的代码到现在为止：

setInterval(function(){check()}, 100);

function check() {

   var count = document.getElementById("count");
   if(document.getElementById("element") && count.value != 1) {
      //some code
      count.value = 1;
   }

}

它有效，但我认为这是达到目标的一种非常糟糕的方式。我想要一个更简单的解决方案，但我找不到。

Answer 1

你的方式是最可靠的，因为它不会失败。

但是，您可能希望尝试在change元素上收听count个事件，并在element存在时重置该值。这意味着您的验证码仅在对值进行更改时运行。

Answer 2

你最初想做这件事吗？

关于你这样做了吗？

$(document).ready(function(){
  if($(#element)) { do something };
});

编辑：

搜索10秒后

：

$("#someDiv").bind("DOMSubtreeModified", function() {
    alert("tree changed");
});

Answer 3

您可以侦听DOM事件（插入或修改元素时）并仅在此时检查您的情况，而不是每个时间间隔。

如果您需要有关DOM事件的一些信息，可以查看：http://en.wikipedia.org/wiki/DOM_events#HTML_events（突变事件）

Answer 4

我能想到的一个解决方案是将MutationObserver与后退机制（如

）一起使用

jQuery(function() {

  if (window.MutationObserver) {
    var target = document.querySelector('#myparent');

    // create an observer instance
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        [].forEach.call(mutation.addedNodes, function(el, i) {
          if (el.id == 'element') {
            check();
            //if you don't want to listen any more remove the listener
            //observer.disconnect();
          }
        })
      });
    });

    // configuration of the observer:
    var config = {
      childList: true
    };

    // pass in the target node, as well as the observer options
    observer.observe(target, config);

  } else {
    setInterval(function() {
      if (document.getElementById("element")) {
        check();
      }
    }, 100);
  }

  function check() {
    var count = document.getElementById("count");
    if (count.value != 1) {
      //some code
      count.value = 1;
    }
  }
});

$('button').click(function() {
  $('#myparent').append('<div id="element">Some text</div>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Add</button>
<input id="count" />
<div id="myparent"></div>

注意：解决方案假设您有动态元素的静态父元素（如上例中的myparent元素）

如果元素存在，则执行一些代码

4 个答案: