selector option ready, fixes #62

src/containers/editable-container.js

@@ -23,8 +23,8 @@ Applied as jQuery method.
         innerCss: null, //tbd in child class
         init: function(element, options) {
             this.$element = $(element);
-            //todo: what is in priority: data or js?
+            //since 1.4.1 container do not use data-* directly as they already merged into options.
-            this.options = $.extend({}, $.fn.editableContainer.defaults, $.fn.editableutils.getConfigData(this.$element), options);         
+            this.options = $.extend({}, $.fn.editableContainer.defaults, options);         
             this.splitOptions();
             
             //set scope of form callbacks to element

src/editable-form/editable-form.js

@@ -11,7 +11,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
 
     var EditableForm = function (div, options) {
         this.options = $.extend({}, $.fn.editableform.defaults, options);
-        this.$div = $(div); //div, containing form. Not form tag! Not editable-element.
+        this.$div = $(div); //div, containing form. Not form tag. Not editable-element.
         if(!this.options.scope) {
             this.options.scope = this;
         }

src/element/editable-element.js

@@ -8,8 +8,13 @@ Makes editable any HTML element on the page. Applied as jQuery method.
 
     var Editable = function (element, options) {
         this.$element = $(element);
-        this.options = $.extend({}, $.fn.editable.defaults, $.fn.editableutils.getConfigData(this.$element), options);  
+        //data-* has more priority over js options: because dynamically created elements may change data-* 
-        this.init();
+        this.options = $.extend({}, $.fn.editable.defaults, options, $.fn.editableutils.getConfigData(this.$element));  
+        if(this.options.selector) {
+            this.initLive();
+        } else {
+            this.init();
+        }
     };
 
     Editable.prototype = {
@@ -52,8 +57,10 @@ Makes editable any HTML element on the page. Applied as jQuery method.
             if(this.options.toggle !== 'manual') {
                 this.$element.addClass('editable-click');
                 this.$element.on(this.options.toggle + '.editable', $.proxy(function(e){
+                    //prevent following link
                     e.preventDefault();
-                    //stop propagation not required anymore because in document click handler it checks event target
+                    
+                    //stop propagation not required because in document click handler it checks event target
                     //e.stopPropagation();
                     
                     if(this.options.toggle === 'mouseenter') {
@@ -95,6 +102,24 @@ Makes editable any HTML element on the page. Applied as jQuery method.
             }, this));
         },
 
+        /*
+         Initializes parent element for live editables 
+        */
+        initLive: function() {
+           //store selector 
+           var selector = this.options.selector;
+           //modify options for child elements
+           this.options.selector = false; 
+           this.options.autotext = 'never';
+           //listen toggle events
+           this.$element.on(this.options.toggle + '.editable', selector, $.proxy(function(e){
+               var $target = $(e.target);
+               if(!$target.data('editable')) {
+                   $target.editable(this.options).trigger(e);
+               }
+           }, this)); 
+        },
+        
         /*
         Renders value into element's text.
         Can call custom display method from options.
@@ -622,8 +647,8 @@ Makes editable any HTML element on the page. Applied as jQuery method.
 
         @property emptyclass 
         @type string
+        @since 1.4.1        
         @default editable-empty
-        @since 1.4.1
         **/        
         emptyclass: 'editable-empty',
         /**
@@ -632,10 +657,35 @@ Makes editable any HTML element on the page. Applied as jQuery method.
 
         @property unsavedclass 
         @type string
+        @since 1.4.1        
         @default editable-unsaved
-        @since 1.4.1
         **/        
-        unsavedclass: 'editable-unsaved'        
+        unsavedclass: 'editable-unsaved',
+        /**
+        If a css selector is provided, editable will be delegated to the specified targets.  
+        Usefull for dynamically generated DOM elements.  
+        **Please note**, that delegated targets can't use `emptytext` and `autotext` options, 
+        as they are initialized after first click.    
+
+        @property selector 
+        @type string
+        @since 1.4.1        
+        @default null
+        @example
+        <div id="user">
+          <a href="#" data-name="username" data-type="text" title="Username">awesome</a>
+          <a href="#" data-name="group" data-type="select" data-source="/groups" data-value="1" title="Group">Operator</a>
+        </div>     
+        
+        <script>
+        $('#user').editable({
+            selector: 'a',
+            url: '/post',
+            pk: 1
+        });
+        </script>
+        **/         
+        selector: null        
     };
     
 }(window.jQuery));

test/unit/common.js

@@ -155,13 +155,13 @@
         ok(!p.is(':visible'), 'popover1 closed');
         ok(!p2.is(':visible'), 'popover2 closed');
      });  
-     
+    
      test("onblur: submit", function () {
         var oldValue = 'abc',
             newValue = 'cde',
-            e = $('<a href="#" data-type="text" data-pk="1" data-url="post.php" id="a">'+oldValue+'</a>').appendTo('#qunit-fixture').editable({
+            e = $('<a href="#" data-type="text" data-pk="1" id="a">'+oldValue+'</a>').appendTo('#qunit-fixture').editable({
                onblur: 'submit',
-               url: function() {}
+               send: 'never'
             }),  
             e2 = $('<a href="#" data-type="text" data-pk="1" data-url="post.php" id="b">abcd</a>').appendTo('#qunit-fixture').editable();  
         
@@ -179,7 +179,7 @@
         $('#qunit-fixture').click();
         ok(!p.is(':visible'), 'popover1 closed');
         equal(e.data('editable').value, newValue, 'new value saved');
-        
+
         //click on another editable                                                              
         e.click();
         p = tip(e);
@@ -644,5 +644,57 @@
         
    });     
     
+     test("`selector` option", function () {
+        var parent = $('<div><a href="#" id="a" data-type="text">123</a></div>').appendTo('#qunit-fixture').editable({
+            selector: 'a',
+            url: 'post.php',
+            source: groups
+        }),
+        b = $('<a href="#" id="b" data-type="select" data-value="1"></a>'),
+        e = $('#a'),
+        selected = 2;
+       
+        ok(!e.hasClass('editable'), 'no editable class applied');
+       
+        e.click();                       
+        var p = tip(e); 
+        
+        ok(e.hasClass('editable'), 'editable class applied');                    
+        ok(e.data('editable'), 'data(editable) ok');                    
+        ok(!e.data('editable').selector, 'selector cleared');
+        equal(e.data('editable').options.url, 'post.php', 'url ok');
+        equal(e.data('editable').options.type, 'text', 'type text ok');
+                            
+        ok(p.is(':visible'), 'popover visible');
+        ok(p.find('input[type=text]').length, 'input exists');
+        equal(p.find('input[type=text]').val(), '123', 'input contain correct value');
+
+        //dynamically add second element
+        b.appendTo(parent);
+        e = b; 
+               
+        e.click();
+        ok(!p.is(':visible'), 'first popover closed');
+        
+        ok(e.data('editable'), 'data(editable) ok');                    
+        ok(!e.data('editable').selector, 'selector cleared');
+        equal(e.data('editable').options.url, 'post.php', 'url ok');
+        equal(e.data('editable').options.type, 'select', 'type select ok');        
+        
+        p = tip(e); 
+        ok(p.is(':visible'), 'second popover visible');
+        
+        ok(p.find('select').length, 'select exists');
+        equal(p.find('select').find('option').length, size, 'options loaded');
+        equal(p.find('select').val(), e.data('editable').value, 'selected value correct');        
+        
+        p.find('select').val(selected);
+        p.find('form').submit(); 
+
+        ok(!p.is(':visible'), 'popover closed');
+        equal(e.data('editable').value, selected, 'new value saved');
+        equal(e.text(), groups[selected], 'new text shown'); 
+    });    
+   
           
 }(jQuery));