Detect changes in the DOM

后端 未结 7 2339
温柔的废话
温柔的废话 2020-11-21 05:45

I want to execute a function when some div or input are added to the html. Is this possible?

For example, a text input is added, then the function should be called.<

7条回答
  •  醉酒成梦
    2020-11-21 06:07

    I have recently written a plugin that does exactly that - jquery.initialize

    You use it the same way as .each function

    $(".some-element").initialize( function(){
        $(this).css("color", "blue"); 
    });
    

    The difference from .each is - it takes your selector, in this case .some-element and wait for new elements with this selector in the future, if such element will be added, it will be initialized too.

    In our case initialize function just change element color to blue. So if we'll add new element (no matter if with ajax or even F12 inspector or anything) like:

    $("
    ").addClass('some-element').appendTo("body"); //new element will have blue color!

    Plugin will init it instantly. Also plugin makes sure one element is initialized only once. So if you add element, then .detach() it from body and then add it again, it will not be initialized again.

    $("
    ").addClass('some-element').appendTo("body").detach() .appendTo(".some-container"); //initialized only once

    Plugin is based on MutationObserver - it will work on IE9 and 10 with dependencies as detailed on the readme page.

提交回复
热议问题