Allow the observed node to be specified in options.target.

Author: bezborodow

.gitignore

@@ -0,0 +1,2 @@
+.*.swp
+.*.swo

jquery.initialize.js

@@ -23,6 +23,7 @@
     // List of MutationSelectorObservers.
     var msobservers = [];
     msobservers.initialize = function (selector, callback, options) {
+        var target = options.target || document.documentElement;
 
         // Wrap the callback so that we can ensure that it is only
         // called once per element.
@@ -38,38 +39,52 @@
         $(selector).each(callbackOnce);
 
         // Then, add it to the list of selector observers.
-        this.push(new MutationSelectorObserver(selector, callbackOnce, options));
-    };
+        var msobserver = new MutationSelectorObserver(selector, callbackOnce, options)
+        this.push(msobserver);
+
+        // The MutationObserver watches for when new elements are added to the DOM.
+        var observer = new MutationObserver(function (mutations) {
+
+            // For each mutation.
+            for (var m = 0; m < mutations.length; m++) {
+                console.log(mutations[m]);
+
+                // Do we observe this mutation type?
+                if ($.inArray(mutations[m].type, mtypes) == -1) continue;
+
+                if (msobserver.options.scanDocument) {
 
-    // The MutationObserver watches for when new elements are added to the DOM.
-    var observer = new MutationObserver(function (mutations) {
-
-        // For each MutationSelectorObserver currently registered.
-        for (var j = 0; j < msobservers.length; j++) {
-            if (msobservers[j].options.scanDocument) {
-
-                // Scan the entire document.
-                $(msobservers[j].selector)
-                    .each(msobservers[j].callback);
-            } else {
-
-                // For each mutation.
-                for (var m = 0; m < mutations.length; m++) {
-                    // If mutation type is observed.
-                    if ($.inArray(mutations[m].type, mtypes) != -1) {
-                        for (var n = 0; n < mutations[m].addedNodes.length; n++) {
-                            $(mutations[m].addedNodes[n]).find(msobservers[j].selector)
-                                .addBack(msobservers[j].selector)
-                                .each(msobservers[j].callback);
-                        }
+                    // Search within the observed node for elements matching the selector.
+                    // This can take longer, but we are more likely to find a match with
+                    // complex selectors.
+                    $(target).find(msobserver.selector)
+                        .each(msobserver.callback);
+                } else {
+
+                    // If this is an attributes mutation, then the target is the node upon which the mutation occurred.
+                    if (mutations[m].type == 'attributes') {
+                        $(mutations[m].target)
+                            .find(msobserver.selector) // Find any descendent nodes matching selector
+                            .addBack(msobserver.selector) // Include the mutated node itself.
+                            .each(msobserver.callback); // initialize with the callback.
+                        continue;
+                    }
+
+                    // Otherwise, search for added nodes.
+                    // Search added nodes only for matching selectors.
+                    for (var n = 0; n < mutations[m].addedNodes.length; n++) {
+                        $(mutations[m].addedNodes[n])
+                            .find(msobserver.selector) // Find any descendent nodes matching selector
+                            .addBack(msobserver.selector) // Include the added node itself.
+                            .each(msobserver.callback); // initialize with the callback.
                     }
                 }
             }
-        }
-    });
+        });
 
-    // Observe the entire document.
-    observer.observe(document.documentElement, {childList: true, subtree: true, attributes: true});
+        // Observe the target element.
+        observer.observe(target, {childList: true, subtree: true, attributes: true});
+    };
 
     // Deprecated API (does not work with jQuery >= 3.1.1):
     $.fn.initialize = function (callback, options) {
@@ -82,7 +97,8 @@
     };
 
     $.initialize.defaults = {
-        scanDocument: true
+        scanDocument: true,
+        target: null // Defaults observe the entire document.
     }
 
 })(jQuery);

test.html

@@ -11,6 +11,12 @@
 
 	<h2>We want every .initialize-me item to have color changed to blue by js - no matter how and when item with this class is added</h2>
 
+	<button id="add-new">Add new item</button>
+
+	<button id="change-class">Just add .initialize-me to .wrong-class</button>
+
+    <hr>
+
 	<div class="wrong-class">
 		This elem has .wrong-class and will not be initialized
 	</div>
@@ -19,10 +25,6 @@ <h2>We want every .initialize-me item to have color changed to blue by js - no m
 		This class has .initialize-me class so it will be initialized
 	</div>
 
-	<button id="add-new">Add new item</button>
-
-	<button id="change-class">Just add .initialize-me to .wrong-class</button>
-
 	<p>You can even add item with .initialize-me class via browser inspector - proper js will be executed on it just when you finish edition.</p>
 
 	<script>

test2.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>jquery.initialize test</title>
+	<!-- Load MutationObserver and WeakMap polyfill for IE9 and 10 -->
+	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+	<script src="jquery.initialize.js"></script>
+</head>
+<body>
+
+	<h2>We want every .initialize-me item to have color changed to blue by js - no matter how and when item with this class is added</h2>
+
+	<button id="add-new">Add new item</button>
+
+	<button id="change-class">Just add .initialize-me to .wrong-class</button>
+
+	<button id="add-outside">Add new item outside target element.</button>
+
+    <hr>
+
+	<p>You can even add item with .initialize-me class via browser inspector - proper js will be executed on it just when you finish edition.</p>
+
+    <div id="target-element" style="border: 1px dashed red; margin: 15px;">
+        <div class="wrong-class">
+            This elem has .wrong-class and will not be initialized
+        </div>
+
+        <div class="initialize-me">
+            This class has .initialize-me class so it will be initialized
+        </div>
+    </div>
+
+	<script>
+
+		$(function() {
+			
+			// Deprecated API (does not work with jQuery >= 3.1.1):
+			// $('.initialize-me').initialize(function() {
+			// 	$(this).css('color', 'blue');
+			// });
+			
+			$.initialize.defaults.scanDocument = false;
+			$.initialize.defaults.target = document.getElementById('target-element');
+			$.initialize('.initialize-me', function() {
+				$(this).css('color', 'blue');
+			});
+
+			$('#add-new').click(function(){
+				$('<div>')
+                    .addClass('initialize-me')
+                    .text('New item that was just appended to the target element and it’s color is automatically changed to blue without any additional js.')
+                    .appendTo('#target-element');
+			});
+
+			$('#add-outside').click(function(){
+				$('<div>')
+                    .addClass('initialize-me')
+                    .text('This item wont be initialised because it was added outside the target element that is being observed.')
+                    .appendTo('body');
+			});
+
+			$('#change-class').click(function(){
+				$('.wrong-class').addClass('initialize-me');
+			});
+
+		});
+
+	</script>
+	
+</body>
+</html>