jQuery事件:检测对div的html /文本的更改

时间:2013-03-27 11:25:44

标签: jquery jquery-ui

我有一个div,其内容一直在变化,无论是ajax requestsjquery functionsblur等等。

有没有办法可以在任何时间点检测到div上的任何变化?

我不想使用任何间隔或检查默认值。

这样的事情可以做到

$('mydiv').contentchanged() {
 alert('changed')
}

13 个答案:

答案 0 :(得分:358)

如果您不想使用计时器并检查innerHTML,您可以尝试此事件

$('mydiv').bind("DOMSubtreeModified",function(){
  alert('changed');
});

更多详细信息和浏览器支持数据为Here

注意:在较新的jQuery版本中,不推荐使用bind(),因此您应该使用on()代替:

$("body").on('DOMSubtreeModified', "mydiv", function() {
    alert('changed');
});

答案 1 :(得分:39)

你可以试试这个

$('.myDiv').bind('DOMNodeInserted DOMNodeRemoved', function() {

});

但这可能不适用于Internet Explorer,尚未测试

答案 2 :(得分:38)

Since $("#selector").bind() is deprecated,你应该使用:

...{}

答案 3 :(得分:30)

您正在寻找MutationObserverMutation Events。既不是在任何地方都得到支持,也没有被开发者世界过于喜爱地看待。

如果您知道(并且可以确定)div的大小会发生变化,您可以使用crossbrowser resize event

答案 4 :(得分:29)

使用Javascript MutationObserver

  //More Details https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
 // select the target node
var target = document.querySelector('mydiv')
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  console.log($('mydiv').text());   
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);

答案 5 :(得分:19)

以下代码适合我。

$("body").on('DOMSubtreeModified', "mydiv", function() {
    alert('changed');
});

希望它会帮助某人:)

答案 6 :(得分:17)

此问题没有内置解决方案,这是您的设计和编码模式的问题。

您可以使用发布者/订阅者模式。为此,您可以使用jQuery自定义事件或您自己的事件机制。

首先,

function changeHtml(selector, html) {
    var elem = $(selector);
    jQuery.event.trigger('htmlchanging', { elements: elem, content: { current: elem.html(), pending: html} });
    elem.html(html);
    jQuery.event.trigger('htmlchanged', { elements: elem, content: html });
}

现在您可以订阅divhtmlchanging / divhtmlchanged事件,如下所示

$(document).bind('htmlchanging', function (e, data) {
    //your before changing html, logic goes here
});

$(document).bind('htmlchanged', function (e, data) {
    //your after changed html, logic goes here
});

现在,您必须通过此changeHtml()功能更改div内容更改。因此,您可以监视或可以相应地进行必要的更改,因为绑定包含该信息的回调数据参数。

您必须像这样更改div的html;

changeHtml('#mydiv', '<p>test content</p>');

此外,您可以将此用于除输入元素之外的任何html元素。无论如何,你可以修改它以与任何元素一起使用。

答案 7 :(得分:8)

使用MutationObserver提供的此代码段中显示的Mozilla,并改编自this blog post

或者,您可以使用JQuery示例seen in this link

Chrome 18 +,Firefox 14 +,IE 11 +,Safari 6 +

// Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type == 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

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

答案 8 :(得分:3)

您可以将div的旧innerHTML存储在变量中。设置间隔以检查旧内容是否与当前内容匹配。当这不是真的做某事。

答案 9 :(得分:1)

尝试MutationObserver:

浏览器支持:http://caniuse.com/#feat=mutationobserver

<html>
  <!-- example from Microsoft https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/dom/mutation-observers/ -->

  <head>
    </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      // Inspect the array of MutationRecord objects to identify the nature of the change
function mutationObjectCallback(mutationRecordsList) {
  console.log("mutationObjectCallback invoked.");

  mutationRecordsList.forEach(function(mutationRecord) {
    console.log("Type of mutation: " + mutationRecord.type);
    if ("attributes" === mutationRecord.type) {
      console.log("Old attribute value: " + mutationRecord.oldValue);
    }
  });
}
      
// Create an observer object and assign a callback function
var observerObject = new MutationObserver(mutationObjectCallback);

      // the target to watch, this could be #yourUniqueDiv 
      // we use the body to watch for changes
var targetObject = document.body; 
      
// Register the target node to observe and specify which DOM changes to watch
      
      
observerObject.observe(targetObject, { 
  attributes: true,
  attributeFilter: ["id", "dir"],
  attributeOldValue: true,
  childList: true
});

// This will invoke the mutationObjectCallback function (but only after all script in this
// scope has run). For now, it simply queues a MutationRecord object with the change information
targetObject.appendChild(document.createElement('div'));

// Now a second MutationRecord object will be added, this time for an attribute change
targetObject.dir = 'rtl';


      </script>
    </body>
  </html>

答案 10 :(得分:1)

尝试了以上给出的一些答案,但两次触发事件。如果您需要相同的解决方案,则可以使用。

$('mydiv').one('DOMSubtreeModified', function(){
    console.log('changed');
});

答案 11 :(得分:0)

通过jQuery或直接通过de DOM-API向div添加一些内容,默认为.appendChild()函数。你可以做的是覆盖当前对象的.appendChild()函数并在其中实现一个观察者。现在已经覆盖了我们的.appendChild()函数,我们需要从其他对象借用该函数以便能够附加内容。因此,我们调用另一个div的.appendChild()来最终附加内容。当然,这也适用于.removeChild()

var obj = document.getElementById("mydiv");
    obj.appendChild = function(node) {
        alert("changed!");

        // call the .appendChild() function of some other div
        // and pass the current (this) to let the function affect it.
        document.createElement("div").appendChild.call(this, node);
        }
    };

在这里你可以找到一个天真的例子。我猜你可以自己扩展它。 http://jsfiddle.net/RKLmA/31/

顺便说一下:这表明JavaScript符合OpenClosed原则。 :)

答案 12 :(得分:0)

DOMSubtreeModified 不是一个好的解决方案。如果您决定更改事件处理程序内部的DOM,可能会导致 无限循环 ,因此已在许多浏览器中将其禁用。 MutationObserver 将是答案。

MDN Doc

const onChangeElement = (qSelector, cb)=>{
 const targetNode = document.querySelector(qSelector);
 if(targetNode){
    const config = { attributes: true, childList: false, subtree: false };
    const callback = function(mutationsList, observer) {
        cb($(qSelector))
    };
    const observer = new MutationObserver(callback);
    observer.observe(targetNode, config);
 }else {
    console.error("onChangeElement: Invalid Selector")
 }
}

您可以使用它,

onChangeElement('mydiv', function(jqueryElement){
   alert('changed')
})