当元素的内容发生变化时如何检测

时间:2017-01-27 01:05:17

标签: javascript jquery html

我正在寻找一种方法来监视元素中的动态填充(无页面重新加载)内容,以便我可以将一个类添加到另一个元素。

到目前为止,我有这个:

HTML
<div class="message-container">
  <div class="messages error"><span></span></div>
  <div class="messages success"><span></span></div>
  <div class="messages warning"><span></span></div>
  <div class="messages warning"><span></span></div>
</div>

<div class="myDiv">...</div>
JS
$(document).ready(function() {
  if($.trim($("div.messages.success span").html()) != '') {
    $('.myDiv').addClass('.with-message');
  }
});

如果填充了任何邮件myDiv,我如何让with-message拥有span课程?

请注意,它可以在不重新加载的情况下即时填充,或者在登录页面时存在,或者填充重新加载。

5 个答案:

答案 0 :(得分:0)

两种方法:

1.)使用MutationObserver(supported IE11<

// select the target node
var target = $(".success")[0];
 
// create an observer instance
var observer = new MutationObserver(function(mutations) {
    // mutations.forEach(function(mutation) {
        console.log("div.success subtree changed");
    // });
});
 
// configuration of the observer:
var config = { childList: true}; // ,subtree: true, characterData: true 
 
// pass in the target node, as well as the observer options
observer.observe(target, config);
 

setTimeout(function(){
  $(".messages").each(function(item,x){
    x.innerHTML = "content";
  });
},1000);
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div class="message-container">
  <div class="messages error"><span></span></div>
  <div class="messages success"><span></span></div>
  <div class="messages warning"><span></span></div>
  <div class="messages warning"><span></span></div>
</div>
</body>
</html>

2.)使用!已弃用! DOMSubtreeModified事件。 (不推荐)

您可以尝试以下操作(jsFiddle):

 
$('.messages').bind("DOMSubtreeModified",function(){
  console.log('changed');
});

setTimeout(function(){
  $(".messages").html("content");
},1000);
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
<div class="message-container">
  <div class="messages error"><span></span></div>
  <div class="messages success"><span></span></div>
  <div class="messages warning"><span></span></div>
  <div class="messages warning"><span></span></div>
</div>
</body>
</html>

我注意到一个副作用,事件被解雇了两次。

警告:

  

DOMSubtreeModified事件类型在本规范中定义   参考和完整性,但此规范不赞成使用   这种事件类型。

<强>支持:

  

IE8(及以下)

不支持DOMSubtreeModified

答案 1 :(得分:0)

您可以使用MutationObserver来检测添加子项的时间。

// select the target node
var target = document.querySelector(".messages.success");

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  document.querySelector(".myDiv").classList.toggle("active", mutations[0].addedNodes.length);
});

// configuration of the observer:
var config = {
  childList: true
};

// pass in the target node, as well as the observer options
observer.observe(target, config);

// later, you can stop observing
//observer.disconnect();

window.setTimeout(function() {
  var temp = document.createElement("div");
  temp.innerHTML = "Hello";
  document.querySelector(".messages.success").appendChild(temp);
}, 5000);
.active {
  background-color: green;
}
<div class="message-container">
  <div class="messages error"><span></span>
  </div>
  <div class="messages success"><span></span>
  </div>
  <div class="messages warning"><span></span>
  </div>
  <div class="messages warning"><span></span>
  </div>
</div>

<div class="myDiv">...</div>

或者你可以只调查元素并查看它是否有任何子元素

答案 2 :(得分:0)

假设用户类型进入相关字段,您需要做的就是在keyupkeydownkeypress事件发生时执行检查触发了相关元素:

$(document).ready(function() {
  $("div.messages.success span").keyup(function(){
    if($.trim($("div.messages.success span").html()) != '') {
      $('.myDiv').addClass('with-message');
    }
  });
});

请注意,addClass() 应将.与类名一起传递。

假设AngularJS正在填充你的字段(正如你在问题中的评论所说),你应该直接用Angular应用这个类,类似于:

app.controller('Ctrl', function($scope) {
    $scope.click = function() {
      angular.element('.myDiv').addClass('with-message');
    };
});

希望这有帮助!

答案 3 :(得分:0)

$(document).ready(function() {
  updateDiv();
});

function updateDiv(){
  $('.myDiv').removeClass('.with-message');
  $.each($(".messages span"), function(){
    if($(this).text().length>0){
      $('.myDiv').addClass('.with-message');
    }
  });
  setTimeout("updateDiv()",3000);//periodically check for changes
}

答案 4 :(得分:-1)

除了最初运行之外,您还可以侦听正在创建的新元素:

document.addEventListener("DOMNodeInserted", function(event) {
      if($.trim($("div.messages.success span").html()) != '') {
          $('.myDiv').addClass('.with-message');
      }  
})

或者,看看Jquery的实时通话: http://api.jquery.com/live/

编辑: 更好的方法是在插入新元素时分配类。