Use data-jquery-once attribute instead of class

2 files changed, 35 insertions, 15 deletions

diff --git a/jquery.once.js b/jquery.once.js
index 4117dbf..71e9268 100644
--- a/jquery.once.js
+++ b/jquery.once.js
@@ -59,9 +59,18 @@
       }
       id = 'jquery-once-' + cache[id];
     }
-    // Remove elements from the set that have already been processed.
-    var name = id + '-processed';
-    var elements = this.not('.' + name).addClass(name);
+
+    /**
+     * Adds the ID at the end of attribute value.
+     */
+    function addID (index, value) {
+      return $.trim((value || '') + ' ' + id);
+    }
+
+    var elements = this
+      // Remove elements from the set that have already been processed.
+      .not('[data-jquery-once~="' + id + '"]')
+      .attr('data-jquery-once', addID);
 
     return $.isFunction(fn) ? elements.each(fn) : elements;
   };
@@ -84,8 +93,19 @@
    * @api public
    */
   $.fn.removeOnce = function (id, fn) {
-    var name = id + '-processed';
-    var elements = this.filter('.' + name).removeClass(name);
+    /**
+     * Removes the ID from the attribute value.
+     */
+    function removeID (index, value) {
+      return $.trim(value.replace(id, ''))
+        // Split and join to keep the value clean.
+        .split(/\s+/g)
+        .join(' ');
+    }
+
+    var elements = this
+      .filter('[data-jquery-once~="' + id + '"]')
+      .attr('data-jquery-once', removeID);
 
     return $.isFunction(fn) ? elements.each(fn) : elements;
   };
diff --git a/test/test.js b/test/test.js
index c93cdfd..457f1e7 100644
--- a/test/test.js
+++ b/test/test.js
@@ -29,10 +29,10 @@ test("Called only once", function() {
   ok(count === 1);
 });
 
-test("Apply the class correctly", function() {
+test("Apply the value to attribute correctly", function() {
   // Verify that the element starts without the class.
-  var hasClass = $('#test3 span').hasClass('test3-processed');
-  ok(!hasClass, 'Processed class not applied in the beginning.');
+  var hasClass = ($('#test3 span').attr('data-jquery-once') || '').indexOf('test3') !== -1;
+  ok(!hasClass, 'Value not applied in the beginning.');
 
   // Create one once() call.
   $('#test3 span').once('test3', function() {
@@ -40,22 +40,22 @@ test("Apply the class correctly", function() {
   });
 
   // Verify the class is applied.
-  hasClass = $('#test3 span').hasClass('test3-processed');
-  ok(hasClass, 'The processed class is properly applied after once().');
+  hasClass = $('#test3 span').attr('data-jquery-once').indexOf('test3') !== -1;
+  ok(hasClass, 'The value is properly applied after once().');
 });
 
-test("Remove the class correctly", function() {
+test("Remove the value from attribute correctly", function() {
   // Create one once() call.
   $('#test4 span').once('test4', function() {
     // Do nothing.
   });
 
   // Verify the class is applied.
-  var hasClass = $('#test4 span').hasClass('test4-processed');
-  ok(hasClass, 'The processed class is properly applied after once().');
+  var hasClass = $('#test4 span').attr('data-jquery-once').indexOf('test4') !== -1;
+  ok(hasClass, 'The value is properly applied after once().');
 
   // Remove the once property.
   $('#test4 span').removeOnce('test4');
-  hasClass = $('#test4 span').hasClass('test4-processed');
-  ok(!hasClass, 'The processed class is properly removed when called removeOnce().');
+  hasClass = $('#test4 span').attr('data-jquery-once').indexOf('test4') !== -1;
+  ok(!hasClass, 'The value is properly removed when called removeOnce().');
 });