Fixed #331: onclick events in items not working.

HISTORY.md

@@ -21,6 +21,7 @@ http://visjs.org
   individual items.
 - Fixed height of BackgroundItems not being 100% when timeline has a fixed height.
 - Fixed width of BackgroundItems not being reduced to 0 when zooming out.
+- Fixed onclick events in items not working. 
 
 ### DataSet
 

lib/timeline/component/ItemSet.js

@@ -1271,8 +1271,6 @@ ItemSet.prototype._onSelectItem = function (event) {
       items: this.getSelection()
     });
   }
-
-  event.stopPropagation();
 };
 
 /**
@@ -1360,8 +1358,6 @@ ItemSet.prototype._onMultiSelectItem = function (event) {
     this.body.emitter.emit('select', {
       items: this.getSelection()
     });
-
-    event.stopPropagation();
   }
 };
 

lib/timeline/component/item/Item.js

@@ -171,17 +171,22 @@ Item.prototype._updateContents = function (element) {
     content = this.data.content;
   }
 
-  if (content instanceof Element) {
-    element.innerHTML = '';
-    element.appendChild(content);
-  }
-  else if (content != undefined) {
-    element.innerHTML = content;
-  }
-  else {
-    if (!(this.data.type == 'background' && this.data.content === undefined)) {
-      throw new Error('Property "content" missing in item ' + this.id);
+  if(content !== this.content) {
+    // only replace the content when changed
+    if (content instanceof Element) {
+      element.innerHTML = '';
+      element.appendChild(content);
+    }
+    else if (content != undefined) {
+      element.innerHTML = content;
     }
+    else {
+      if (!(this.data.type == 'background' && this.data.content === undefined)) {
+        throw new Error('Property "content" missing in item ' + this.id);
+      }
+    }
+
+    this.content = content;
   }
 };
 

test/timeline.html

@@ -71,7 +71,8 @@
   items.add([
     {_id: 0, content: 'item 0', start: now.clone().add(3, 'days').toDate(), title: 'hello title!'},
     {_id: '1', content: 'item 1<br>start', start: now.clone().add(4, 'days').toDate()},
-    {_id: 2, content: 'item 2', start: now.clone().add(-2, 'days').toDate() },
+    {_id: 2, content: '<a href="javascript: alert(\'you clicked an anchor\');">Click here! (anchor)</a><br><br>' +
+        '<div onclick="alert(\'you clicked a div\');   ">Click here! (div)</div>', start: now.clone().add(-2, 'days').toDate() },
     {_id: 3, content: 'item 3', start: now.clone().add(2, 'days').toDate(), style: 'color: red;'},
     {
       _id: 4, content: 'item 4 ',
@@ -111,13 +112,13 @@
   });
 
   /*
-  timeline.on('rangechange', function (range) {
-    console.log('rangechange', range);
-  });
-  timeline.on('rangechanged', function (range) {
-    console.log('rangechanged', range);
-  });
-  */
+   timeline.on('rangechange', function (range) {
+   console.log('rangechange', range);
+   });
+   timeline.on('rangechanged', function (range) {
+   console.log('rangechanged', range);
+   });
+   */
 
   items.on('add',    console.log.bind(console));
   items.on('update', console.log.bind(console));