fixes for child nodes

README.md

@@ -0,0 +1,21 @@
+# now and later
+
+You know the situation: you create some HTML nodes dynamically. But the new elements behave not the way, you expected, because you enriched the functionality with javascript.
+
+These newly created elements did not exist, when your initializers ran, so they got not initialized.
+
+But often it is hard to have your initialize functions available - or maybe they realy do not belong to the functionality, which created them.
+
+To help with exactly this situation, there is nowAndLater.
+
+So instead of spreading your initializer calls everywhere, you use `nowAndLater` from the beginning. And all elements which arive later to the party, will handled exactly like those nerds, which were there from the very beginning.
+
+Usage is as follows:
+
+```javascript
+nowAndLater('a.submit-form', (a) => {
+    a.addEventListener('click', () => a.closest('form').submit())
+})
+```
+
+The function takes exactly two arguments: a selector, which will used to identify the elements to work with and a callback, which will be called for each element, that matches this selector. This will happen in the moment you call the nowAndLater function - and everytime a new DOM element arrives, which matches your selector. 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digicomp/now-and-later",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "an easy API for DOM MutationObserver",
   "main": "src/nowAndLater.js",
   "scripts": {

src/nowAndLater.js

@@ -16,7 +16,11 @@ export default function nowAndLater(selector, callback)
     const nodes = document.querySelectorAll(selector);
     const id = Date.now() + '_' + lateInits.length;
     const wrappedCallback = (node) => {
-        node.dataset['nowAndLater' + id] = '';
+        if (node.dataset.nowAndLater === undefined) {
+            node.dataset.nowAndLater = id;
+        } else {
+            node.dataset.nowAndLater += ',' + id;
+        }
         callback(node, selector);
     };
     if (nodes.length > 0) {
@@ -35,16 +39,15 @@ const observer = new MutationObserver(function (mutationsList)
                 if (addedNode['querySelector'] === undefined) { // lets filter out text and comment nodes
                     continue;
                 }
-                const selector = lateInit.selector + ':not([data-now-and-later' + lateInit.id + '])';
+                const selector = lateInit.selector + `:not([data-now-and-later~="${lateInit.id}"])`;
                 // If the added node matches itself, it will not be found by querySelectorAll, so we have to check first
                 if (addedNode.matches(selector)) {
                     lateInit.callback(addedNode);
                 }
-                // NOTE: the added not selector prevents double calls
+                const childNodes = addedNode.querySelectorAll(selector);
-                const nodes = addedNode.querySelectorAll(selector);
+                [...childNodes].forEach(node => {
-                if (nodes.length > 0) {
+                    lateInit.callback(node);
-                    [...nodes].forEach(node => lateInit.callback(node));
+                });
-                }
             }
         }
     }