Question

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

到目前为止，我有这个：

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课程？

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

Answer 1

假设用户类型进入相关字段，您需要做的就是在keyup或keydown或keypress事件发生时执行检查触发了相关元素：

$(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');
    };
});

希望这有帮助！

Answer 2

两种方法：

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

Answer 3

您可以使用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>

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

Answer 4

$(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
}

Answer 5

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

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

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

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

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

5 个答案: