How to bind a function when an element change/mutate

[BobSquarePants]

Hi everyone,

I would like to bind a function when an element (table) change / mutate (actually the innerHTML)
It seem the only DOM event for this is MutationObserver.observe()

I saw this "issues" #1851

but the example is too complex..

from browser import document, window, html

def f(mutations, obserser):
    for mutation in mutations:
        for addedNode in mutation.addedNodes:
            checkNode(addedNode)

observer = window.MutationObserver.new(f)

def checkNode(addedNode):
    print('added node', addedNode)

observer.observe(document.documentElement, {
  'childList': True,
  'subtree': True
})

# Add an element
document <= html.H1("Hello world !")

isn't there something more simpler for what I would like to achieve ?

[PierreQuentel]

If a 10 line almost self-explanatory example is too complex, I don't know what is not complex...

Here is this example adapted to adding a button and binding it:

from browser import document, window, html

def f(mutations, observer):
    for mutation in mutations:
        for addedNode in mutation.addedNodes:
            checkNode(addedNode)

observer = window.MutationObserver.new(f)

def click(ev):
    print('clicked !')
    
def checkNode(addedNode):
    if addedNode.tagName == 'BUTTON':
      addedNode.bind('click', click)

observer.observe(document.documentElement, {
  'childList': True,
  'subtree': True
})

# Add an element
document <= html.BUTTON("Click")

[BobSquarePants]

Hi Pierre,

Thanks for your reply :)

If a 10 line almost self-explanatory example is too complex, I don't know what is not complex...

It's not the example that is bad, but I'm surprise that it require so much lines compare to a bind , change -->

document["MyElement"].bind("change", TheFunction)

I will play with your example and I'll try to reduce it to it's minimum.

[BobSquarePants]

@PierreQuentel ,

Thanks to your example, I made something that was working for me -->

def f_checkInnerMutation(mutations, observer):
	print('kicked in')			

observer = window.MutationObserver.new(f_checkInnerMutation)

observer.observe(document["AnElement"], {
	'childList': True,
	'subtree': False
})

Thank to your example I understood how was working the MutationObserver, but at first glance it was looking it require all those lines to work :)

Cheers !