refactoring of legacy js events

src/public/javascripts/desktop.js

@@ -91,7 +91,7 @@ $(document).on("click", "button[data-help-page]", e => {
 
 $("#logout-button").toggle(!utils.isElectron());
 
-$("#logout-button").click(() => {
+$("#logout-button").on('click', () => {
     const $logoutForm = $('<form action="logout" method="POST">')
                             .append($(`<input type="hidden" name="_csrf" value="${glob.csrfToken}"/>`));
 

src/public/javascripts/dialogs/confirm.js

@@ -76,5 +76,5 @@ function doResolve(ret) {
     $dialog.modal("hide");
 }
 
-$cancelButton.click(() => doResolve(false));
-$okButton.click(() => doResolve(true));
+$cancelButton.on('click', () => doResolve(false));
+$okButton.on('click', () => doResolve(true));

src/public/javascripts/dialogs/export.js

@@ -24,13 +24,13 @@ export async function showDialog(node, defaultType) {
     $exportButton.removeAttr("disabled");
 
     if (defaultType === 'subtree') {
-        $subtreeType.prop("checked", true).change();
+        $subtreeType.prop("checked", true).trigger('change');
 
         // to show/hide OPML versions
-        $("input[name=export-subtree-format]:checked").change();
+        $("input[name=export-subtree-format]:checked").trigger('change');
     }
     else if (defaultType === 'single') {
-        $singleType.prop("checked", true).change();
+        $singleType.prop("checked", true).trigger('change');
     }
     else {
         throw new Error("Unrecognized type " + defaultType);
@@ -79,7 +79,7 @@ function exportBranch(branchId, type, format, version) {
     utils.download(url);
 }
 
-$('input[name=export-type]').change(function () {
+$('input[name=export-type]').on('change', function () {
     if (this.value === 'subtree') {
         if ($("input[name=export-subtree-format]:checked").length === 0) {
             $("input[name=export-subtree-format]:first").prop("checked", true);
@@ -98,7 +98,7 @@ $('input[name=export-type]').change(function () {
     }
 });
 
-$('input[name=export-subtree-format]').change(function () {
+$('input[name=export-subtree-format]').on('change', function () {
     if (this.value === 'opml') {
         $opmlVersions.slideDown();
     }

src/public/javascripts/dialogs/import.js

@@ -18,7 +18,7 @@ let parentNoteId = null;
 export async function showDialog(node) {
     utils.closeActiveDialog();
 
-    $fileUploadInput.val('').change(); // to trigger Import button disabling listener below
+    $fileUploadInput.val('').trigger('change'); // to trigger Import button disabling listener below
 
     $safeImportCheckbox.prop("checked", true);
     $shrinkImagesCheckbox.prop("checked", true);
@@ -64,7 +64,7 @@ function boolToString($el) {
     return $el.is(":checked") ? "true" : "false";
 }
 
-$fileUploadInput.change(() => {
+$fileUploadInput.on('change', () => {
     if ($fileUploadInput.val()) {
         $importButton.removeAttr("disabled");
     }

src/public/javascripts/dialogs/info.js

@@ -34,4 +34,4 @@ $dialog.on("hidden.bs.modal", () => {
     }
 });
 
-$okButton.click(() => $dialog.modal("hide"));
+$okButton.on('click', () => $dialog.modal("hide"));

src/public/javascripts/dialogs/jump_to_note.js

@@ -43,6 +43,6 @@ function showInFullText(e) {
 }
 
 
-$showInFullTextButton.click(showInFullText);
+$showInFullTextButton.on('click', showInFullText);
 
 utils.bindElShortcut($dialog, 'ctrl+return', showInFullText);

src/public/javascripts/dialogs/markdown_import.js

@@ -49,7 +49,7 @@ async function sendForm() {
     $importTextarea.val('');
 }
 
-$importButton.click(sendForm);
+$importButton.on('click', sendForm);
 
 $dialog.on('shown.bs.modal', () => $importTextarea.focus());
 

src/public/javascripts/dialogs/note_info.js

@@ -25,4 +25,4 @@ export function showDialog() {
     $mime.text(activeNote.mime);
 }
 
-$okButton.click(() => $dialog.modal('hide'));
+$okButton.on('click', () => $dialog.modal('hide'));

src/public/javascripts/dialogs/note_revisions.js

@@ -37,7 +37,7 @@ async function loadNoteRevisions(noteId, noteRevisionId) {
     for (const item of revisionItems) {
         $list.append($('<option>', {
             value: item.noteRevisionId,
-            text: item.dateLastEdited.substr(0, 16)
+            text: item.dateLastEdited.substr(0, 16) + ` (${item.contentLength} bytes)`
         }));
     }
 

src/public/javascripts/dialogs/options/advanced.js

@@ -37,25 +37,25 @@ export default class AdvancedOptions {
         this.$cleanupUnusedImagesButton = $("#cleanup-unused-images-button");
         this.$vacuumDatabaseButton = $("#vacuum-database-button");
 
-        this.$forceFullSyncButton.click(async () => {
+        this.$forceFullSyncButton.on('click', async () => {
             await server.post('sync/force-full-sync');
 
             toastService.showMessage("Full sync triggered");
         });
 
-        this.$fillSyncRowsButton.click(async () => {
+        this.$fillSyncRowsButton.on('click', async () => {
             await server.post('sync/fill-sync-rows');
 
             toastService.showMessage("Sync rows filled successfully");
         });
 
-        this.$anonymizeButton.click(async () => {
+        this.$anonymizeButton.on('click', async () => {
             await server.post('anonymization/anonymize');
 
             toastService.showMessage("Created anonymized database");
         });
 
-        this.$cleanupSoftDeletedButton.click(async () => {
+        this.$cleanupSoftDeletedButton.on('click', async () => {
             if (confirm("Do you really want to clean up soft-deleted items?")) {
                 await server.post('cleanup/cleanup-soft-deleted-items');
 
@@ -63,7 +63,7 @@ export default class AdvancedOptions {
             }
         });
 
-        this.$cleanupUnusedImagesButton.click(async () => {
+        this.$cleanupUnusedImagesButton.on('click', async () => {
             if (confirm("Do you really want to clean up unused images?")) {
                 await server.post('cleanup/cleanup-unused-images');
 
@@ -71,7 +71,7 @@ export default class AdvancedOptions {
             }
         });
 
-        this.$vacuumDatabaseButton.click(async () => {
+        this.$vacuumDatabaseButton.on('click', async () => {
             await server.post('cleanup/vacuum-database');
 
             toastService.showMessage("Database has been vacuumed");

src/public/javascripts/dialogs/options/appearance.js

@@ -117,7 +117,7 @@ export default class ApperanceOptions {
         this.$body = $("body");
         this.$container = $("#container");
 
-        this.$themeSelect.change(() => {
+        this.$themeSelect.on('change', () => {
             const newTheme = this.$themeSelect.val();
 
             for (const clazz of Array.from(this.$body[0].classList)) { // create copy to safely iterate over while removing classes
@@ -139,40 +139,40 @@ export default class ApperanceOptions {
             server.put('options/theme/' + newTheme);
         });
 
-        this.$zoomFactorSelect.change(() => { zoomService.setZoomFactorAndSave(this.$zoomFactorSelect.val()); });
+        this.$zoomFactorSelect.on('change', () => { zoomService.setZoomFactorAndSave(this.$zoomFactorSelect.val()); });
 
-        this.$oneTabDisplaySelect.change(() => {
+        this.$oneTabDisplaySelect.on('change', () => {
             const hideTabRowForOneTab = this.$oneTabDisplaySelect.val() === 'hide' ? 'true' : 'false';
 
             server.put('options/hideTabRowForOneTab/' + hideTabRowForOneTab)
                 .then(optionsService.reloadOptions);
         });
 
-        this.$leftPaneMinWidth.change(async () => {
+        this.$leftPaneMinWidth.on('change', async () => {
             await server.put('options/leftPaneMinWidth/' + this.$leftPaneMinWidth.val());
 
             this.resizeLeftPanel();
         });
 
-        this.$leftPaneWidthPercent.change(async () => {
+        this.$leftPaneWidthPercent.on('change', async () => {
             await server.put('options/leftPaneWidthPercent/' + this.$leftPaneWidthPercent.val());
 
             this.resizeLeftPanel();
         });
 
-        this.$mainFontSize.change(async () => {
+        this.$mainFontSize.on('change', async () => {
             await server.put('options/mainFontSize/' + this.$mainFontSize.val());
 
             this.applyFontSizes();
         });
 
-        this.$treeFontSize.change(async () => {
+        this.$treeFontSize.on('change', async () => {
             await server.put('options/treeFontSize/' + this.$treeFontSize.val());
 
             this.applyFontSizes();
         });
 
-        this.$detailFontSize.change(async () => {
+        this.$detailFontSize.on('change', async () => {
             await server.put('options/detailFontSize/' + this.$detailFontSize.val());
 
             this.applyFontSizes();

src/public/javascripts/dialogs/options/code_notes.js

@@ -27,7 +27,7 @@ export default class CodeNotesOptions {
                     .attr("id", id)
                     .attr("data-mime-type", mimeType.mime)
                     .prop("checked", mimeType.enabled))
-                    .change(() => this.save())
+                    .on('change', () => this.save())
                 .append("   ")
                 .append($('<label>')
                     .attr("for", id)

src/public/javascripts/dialogs/options/other.js

@@ -27,12 +27,12 @@ const TPL = `
     <h4>Image compression</h4>
 
     <div class="form-group">
-        <label for="image-max-width-height">Max width / height of an image in pixels (if image will be resized if it exceeds this setting).</label>
+        <label for="image-max-width-height">Max width / height of an image in pixels (image will be resized if it exceeds this setting).</label>
         <input class="form-control" id="image-max-width-height" type="number">
     </div>
 
     <div class="form-group">
-        <label for="image-jpeg-quality">JPEG quality (0 - worst quality, 100 best quality)</label>
+        <label for="image-jpeg-quality">JPEG quality (0 - worst quality, 100 best quality, 50 - 85 is recommended)</label>
         <input class="form-control" id="image-jpeg-quality" min="0" max="100" type="number">
     </div>
 </div>
@@ -67,14 +67,14 @@ export default class ProtectedSessionOptions {
         this.$spellCheckEnabled = $("#spell-check-enabled");
         this.$spellCheckLanguageCode = $("#spell-check-language-code");
 
-        this.$spellCheckEnabled.change(() => {
+        this.$spellCheckEnabled.on('change', () => {
             const opts = { 'spellCheckEnabled': this.$spellCheckEnabled.is(":checked") ? "true" : "false" };
             server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
 
             return false;
         });
 
-        this.$spellCheckLanguageCode.change(() => {
+        this.$spellCheckLanguageCode.on('change', () => {
             const opts = { 'spellCheckLanguageCode': this.$spellCheckLanguageCode.val() };
             server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
 
@@ -83,7 +83,7 @@ export default class ProtectedSessionOptions {
 
         this.$protectedSessionTimeout = $("#protected-session-timeout-in-seconds");
 
-        this.$protectedSessionTimeout.change(() => {
+        this.$protectedSessionTimeout.on('change', () => {
             const protectedSessionTimeout = this.$protectedSessionTimeout.val();
 
             server.put('options', { 'protectedSessionTimeout': protectedSessionTimeout }).then(() => {
@@ -97,7 +97,7 @@ export default class ProtectedSessionOptions {
 
         this.$noteRevisionsTimeInterval = $("#note-revision-snapshot-time-interval-in-seconds");
 
-        this.$noteRevisionsTimeInterval.change(() => {
+        this.$noteRevisionsTimeInterval.on('change', () => {
             const opts = { 'noteRevisionSnapshotTimeInterval': this.$noteRevisionsTimeInterval.val() };
             server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
 
@@ -107,14 +107,14 @@ export default class ProtectedSessionOptions {
         this.$imageMaxWidthHeight = $("#image-max-width-height");
         this.$imageJpegQuality = $("#image-jpeg-quality");
 
-        this.$imageMaxWidthHeight.change(() => {
+        this.$imageMaxWidthHeight.on('change', () => {
             const opts = { 'imageMaxWidthHeight': this.$imageMaxWidthHeight.val() };
             server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
 
             return false;
         });
 
-        this.$imageJpegQuality.change(() => {
+        this.$imageJpegQuality.on('change', () => {
             const opts = { 'imageJpegQuality': this.$imageJpegQuality.val() };
             server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
 

src/public/javascripts/dialogs/options/sidebar.js

@@ -65,19 +65,19 @@ export default class SidebarOptions {
         this.$widgetsEnabled = $("#widgets-enabled");
         this.$widgetsDisabled = $("#widgets-disabled");
 
-        this.$sidebarMinWidth.change(async () => {
+        this.$sidebarMinWidth.on('change', async () => {
             await server.put('options/sidebarMinWidth/' + this.$sidebarMinWidth.val());
 
             this.resizeSidebar();
         });
 
-        this.$sidebarWidthPercent.change(async () => {
+        this.$sidebarWidthPercent.on('change', async () => {
             await server.put('options/sidebarWidthPercent/' + this.$sidebarWidthPercent.val());
 
             this.resizeSidebar();
         });
 
-        this.$showSidebarInNewTab.change(async () => {
+        this.$showSidebarInNewTab.on('change', async () => {
             const flag = this.$showSidebarInNewTab.is(":checked") ? 'true' : 'false';
 
             await server.put('options/showSidebarInNewTab/' + flag);
@@ -131,7 +131,7 @@ export default class SidebarOptions {
                 .attr("title", "If checked, the widget will be by default expanded (opened)")
                 .append($(`<input type="checkbox"${option.expanded ? ' checked' : ''}>`)
                     .attr('id', 'widget-exp-' + name)
-                    .change(() => this.save()))
+                    .on('change', () => this.save()))
                 .append("&nbsp;")
                 .append($("<label>")
                     .attr("for", 'widget-exp-' + name)

src/public/javascripts/dialogs/options/sync.js

@@ -49,7 +49,7 @@ export default class SyncOptions {
 
         this.$form.submit(() => this.save());
 
-        this.$testSyncButton.click(async () => {
+        this.$testSyncButton.on('click', async () => {
             const result = await server.post('sync/test');
 
             if (result.success) {

src/public/javascripts/dialogs/sql_console.js

@@ -119,10 +119,10 @@ async function showTables() {
 
         $tableLink
             .tooltip({html: true, title: $columns.html()})
-            .click(() => codeEditor.setValue("SELECT * FROM " + table.name + " LIMIT 100"));
+            .on('click', () => codeEditor.setValue("SELECT * FROM " + table.name + " LIMIT 100"));
     }
 }
 
 utils.bindElShortcut($query, 'ctrl+return', execute);
 
-$executeButton.click(execute);
+$executeButton.on('click', execute);

src/public/javascripts/mobile.js

@@ -130,13 +130,13 @@ $detail.on("click", ".note-menu-button", async e => {
     });
 });
 
-$("#switch-to-desktop-button").click(() => {
+$("#switch-to-desktop-button").on('click', () => {
     utils.setCookie('trilium-device', 'desktop');
 
     utils.reloadApp();
 });
 
-$("#log-out-button").click(() => {
+$("#log-out-button").on('click', () => {
     $("#logout-form").submit();
 });
 

src/public/javascripts/services/attributes.js

@@ -97,7 +97,7 @@ class Attributes {
             .prop("value", valueAttr.value)
             .addClass("form-control")
             .addClass("promoted-attribute-input")
-            .change(event => this.promotedAttributeChanged(event));
+            .on('change', event => this.promotedAttributeChanged(event));
 
         const $inputCell = $("<td>").append($("<div>").addClass("input-group").append($input));
 
@@ -170,7 +170,7 @@ class Attributes {
                 const $openButton = $("<span>")
                     .addClass("input-group-text open-external-link-button bx bx-trending-up")
                     .prop("title", "Open external link")
-                    .click(() => window.open($input.val(), '_blank'));
+                    .on('click', () => window.open($input.val(), '_blank'));
 
                 $input.after($("<div>")
                     .addClass("input-group-append")
@@ -203,7 +203,7 @@ class Attributes {
             const addButton = $("<span>")
                 .addClass("bx bx-plus pointer")
                 .prop("title", "Add new attribute")
-                .click(async () => {
+                .on('click', async () => {
                     const $new = await this.createPromotedAttributeRow(definitionAttr, {
                         attributeId: "",
                         type: valueAttr.type,
@@ -219,7 +219,7 @@ class Attributes {
             const removeButton = $("<span>")
                 .addClass("bx bx-trash pointer")
                 .prop("title", "Remove this attribute")
-                .click(async () => {
+                .on('click', async () => {
                     if (valueAttr.attributeId) {
                         await server.remove("notes/" + this.ctx.note.noteId + "/attributes/" + valueAttr.attributeId);
                     }

src/public/javascripts/services/context_menu.js

@@ -33,7 +33,7 @@ async function initContextMenu(event, contextMenu) {
                     .addClass("dropdown-item")
                     .append($link)
                     .attr("data-cmd", item.cmd)
-                    .click(function (e) {
+                    .on('click', function (e) {
                         const cmd = $(e.target).closest(".dropdown-item").attr("data-cmd");
 
                         e.originalTarget = event.target;
@@ -92,7 +92,7 @@ async function initContextMenu(event, contextMenu) {
     }).addClass("show");
 }
 
-$(document).click(() => hideContextMenu());
+$(document).on('click', () => hideContextMenu());
 
 function hideContextMenu() {
     // this date checking comes from change in FF66 - https://github.com/zadam/trilium/issues/468

src/public/javascripts/services/entrypoints.js

@@ -27,15 +27,15 @@ function registerEntrypoints() {
     utils.bindGlobalShortcut('ctrl+l', () => import(ADD_LINK).then(d => d.showDialog()));
     utils.bindGlobalShortcut('ctrl+shift+l', () => import(ADD_LINK).then(d => d.showDialogForClone()));
 
-    $("#jump-to-note-dialog-button").click(() => import(JUMP_TO_NOTE).then(d => d.showDialog()));
+    $("#jump-to-note-dialog-button").on('click', () => import(JUMP_TO_NOTE).then(d => d.showDialog()));
     utils.bindGlobalShortcut('ctrl+j', () => import(JUMP_TO_NOTE).then(d => d.showDialog()));
 
-    $("#recent-changes-button").click(() => import(RECENT_CHANGES).then(d => d.showDialog()));
+    $("#recent-changes-button").on('click', () => import(RECENT_CHANGES).then(d => d.showDialog()));
 
-    $("#enter-protected-session-button").click(protectedSessionService.enterProtectedSession);
-    $("#leave-protected-session-button").click(protectedSessionService.leaveProtectedSession);
+    $("#enter-protected-session-button").on('click', protectedSessionService.enterProtectedSession);
+    $("#leave-protected-session-button").on('click', protectedSessionService.leaveProtectedSession);
 
-    $("#toggle-search-button").click(searchNotesService.toggleSearch);
+    $("#toggle-search-button").on('click', searchNotesService.toggleSearch);
     utils.bindGlobalShortcut('ctrl+s', searchNotesService.toggleSearch);
 
     const $noteTabContainer = $("#note-tab-container");
@@ -64,20 +64,20 @@ function registerEntrypoints() {
         import(LINK_MAP).then(d => d.showDialog());
     });
 
-    $("#options-button").click(() => import(OPTIONS).then(d => d.showDialog()));
+    $("#options-button").on('click', () => import(OPTIONS).then(d => d.showDialog()));
 
-    $("#show-help-button").click(() => import(HELP).then(d => d.showDialog()));
+    $("#show-help-button").on('click', () => import(HELP).then(d => d.showDialog()));
     utils.bindGlobalShortcut('f1', () => import(HELP).then(d => d.showDialog()));
 
-    $("#open-sql-console-button").click(() => import(SQL_CONSOLE).then(d => d.showDialog()));
+    $("#open-sql-console-button").on('click', () => import(SQL_CONSOLE).then(d => d.showDialog()));
     utils.bindGlobalShortcut('alt+o', () => import(SQL_CONSOLE).then(d => d.showDialog()));
 
-    $("#show-about-dialog-button").click(() => import(ABOUT).then(d => d.showDialog()));
+    $("#show-about-dialog-button").on('click', () => import(ABOUT).then(d => d.showDialog()));
 
     if (utils.isElectron()) {
         $("#history-navigation").show();
-        $("#history-back-button").click(window.history.back);
-        $("#history-forward-button").click(window.history.forward);
+        $("#history-back-button").on('click', window.history.back);
+        $("#history-forward-button").on('click', window.history.forward);
 
         if (utils.isMac()) {
             // Mac has a different history navigation shortcuts - https://github.com/zadam/trilium/issues/376
@@ -105,7 +105,7 @@ function registerEntrypoints() {
 
     utils.bindGlobalShortcut('f5', utils.reloadApp);
 
-    $("#reload-frontend-button").click(utils.reloadApp);
+    $("#reload-frontend-button").on('click', utils.reloadApp);
     utils.bindGlobalShortcut('ctrl+r', utils.reloadApp);
 
     $("#open-dev-tools-button").toggle(utils.isElectron());
@@ -118,7 +118,7 @@ function registerEntrypoints() {
         };
 
         utils.bindGlobalShortcut('ctrl+shift+i', openDevTools);
-        $("#open-dev-tools-button").click(openDevTools);
+        $("#open-dev-tools-button").on('click', openDevTools);
     }
 
     let findInPage;
@@ -160,7 +160,7 @@ function registerEntrypoints() {
             return false;
         };
 
-        $("#toggle-fullscreen-button").click(toggleFullscreen);
+        $("#toggle-fullscreen-button").on('click', toggleFullscreen);
 
         utils.bindGlobalShortcut('f11', toggleFullscreen);
     }

src/public/javascripts/services/frontend_script_api.js

@@ -87,7 +87,7 @@ function FrontendScriptApi(startNote, currentNote, originEntity = null, tabConte
 
         const button = $('<button>')
             .addClass("btn btn-sm")
-            .click(opts.action);
+            .on('click', opts.action);
 
         if (opts.icon) {
             button.append($("<span>").addClass("bx bx-" + opts.icon))

src/public/javascripts/services/link_map.js

@@ -89,7 +89,7 @@ export default class LinkMap {
                 .prop("id", noteBoxId);
 
             linkService.createNoteLink(noteId, note.title).then($link => {
-                $link.click(e => {
+                $link.on('click', e => {
                     try {
                         $link.tooltip('dispose');
                     }

src/public/javascripts/services/note_autocomplete.js

@@ -26,7 +26,7 @@ function clearText($el) {
     }
 
     $el.setSelectedPath("");
-    $el.autocomplete("val", "").change();
+    $el.autocomplete("val", "").trigger('change');
 }
 
 function showRecentNotes($el) {
@@ -71,9 +71,9 @@ function initNoteAutocomplete($el, options) {
 
     $el.after($sideButtons);
 
-    $clearTextButton.click(() => clearText($el));
+    $clearTextButton.on('click', () => clearText($el));
 
-    $showRecentNotesButton.click(e => {
+    $showRecentNotesButton.on('click', e => {
         showRecentNotes($el);
 
         // this will cause the click not give focus to the "show recent notes" button

src/public/javascripts/services/note_detail_book.js

@@ -48,10 +48,10 @@ class NoteDetailBook {
         this.$zoomOutButton = this.$component.find('.book-zoom-out-button');
         this.$expandChildrenButton = this.$component.find('.expand-children-button');
 
-        this.$zoomInButton.click(() => this.setZoom(this.zoomLevel - 1));
-        this.$zoomOutButton.click(() => this.setZoom(this.zoomLevel + 1));
+        this.$zoomInButton.on('click', () => this.setZoom(this.zoomLevel - 1));
+        this.$zoomOutButton.on('click', () => this.setZoom(this.zoomLevel + 1));
 
-        this.$expandChildrenButton.click(async () => {
+        this.$expandChildrenButton.on('click', async () => {
             for (let i = 1; i < 30; i++) { // protection against infinite cycle
                 const $unexpandedLinks = this.$content.find('.note-book-open-children-button:visible');
 
@@ -111,7 +111,7 @@ class NoteDetailBook {
         this.$content.empty();
 
         if (this.isAutoBook()) {
-            const $addTextLink = $('<a href="javascript:">here</a>').click(() => {
+            const $addTextLink = $('<a href="javascript:">here</a>').on('click', () => {
                 this.ctx.renderComponent(true);
             });
 
@@ -192,8 +192,8 @@ class NoteDetailBook {
             const $downloadButton = $('<button class="file-download btn btn-primary" type="button">Download</button>');
             const $openButton = $('<button class="file-open btn btn-primary" type="button">Open</button>');
 
-            $downloadButton.click(() => utils.download(getFileUrl()));
-            $openButton.click(() => {
+            $downloadButton.on('click', () => utils.download(getFileUrl()));
+            $openButton.on('click', () => {
                 if (utils.isElectron()) {
                     const open = require("open");
 
@@ -221,7 +221,7 @@ class NoteDetailBook {
         }
         else if (type === 'protected-session') {
             const $button = $(`<button class="btn btn-sm"><span class="bx bx-log-in"></span> Enter protected session</button>`)
-                .click(protectedSessionService.enterProtectedSession);
+                .on('click', protectedSessionService.enterProtectedSession);
 
             return $("<div>")
                 .append("<div>This note is protected and to access it you need to enter password.</div>")

src/public/javascripts/services/note_detail_code.js

@@ -19,7 +19,7 @@ class NoteDetailCode {
 
         utils.bindElShortcut(ctx.$tabContent, "ctrl+return", () => this.executeCurrentNote());
 
-        this.$executeScriptButton.click(() => this.executeCurrentNote());
+        this.$executeScriptButton.on('click', () => this.executeCurrentNote());
     }
 
     async render() {

src/public/javascripts/services/note_detail_relation_map.js

@@ -83,7 +83,7 @@ class NoteDetailRelationMap {
         this.pzInstance = null;
 
         this.$relationMapWrapper = ctx.$tabContent.find('.relation-map-wrapper');
-        this.$relationMapWrapper.click(event => {
+        this.$relationMapWrapper.on('click', event => {
             if (this.clipboard) {
                 let {x, y} = this.getMousePosition(event);
 
@@ -121,7 +121,7 @@ class NoteDetailRelationMap {
 
         this.clipboard = null;
 
-        this.$createChildNote.click(async () => {
+        this.$createChildNote.on('click', async () => {
             const promptDialog = await import('../dialogs/prompt.js');
             const title = await promptDialog.ask({ message: "Enter title of new note",  defaultValue: "new note" });
 
@@ -143,7 +143,7 @@ class NoteDetailRelationMap {
             this.clipboard = { noteId: note.noteId, title };
         });
 
-        this.$resetPanZoomButton.click(() => {
+        this.$resetPanZoomButton.on('click', () => {
             // reset to initial pan & zoom state
             this.pzInstance.zoomTo(0, 0, 1 / this.getZoom());
             this.pzInstance.moveTo(0, 0);
@@ -351,8 +351,8 @@ class NoteDetailRelationMap {
             this.pzInstance.moveTo(0, 0);
         }
 
-        this.$zoomInButton.click(() => this.pzInstance.zoomTo(0, 0, 1.2));
-        this.$zoomOutButton.click(() => this.pzInstance.zoomTo(0, 0, 0.8));
+        this.$zoomInButton.on('click', () => this.pzInstance.zoomTo(0, 0, 1.2));
+        this.$zoomOutButton.on('click', () => this.pzInstance.zoomTo(0, 0, 0.8));
     }
 
     saveCurrentTransform() {

src/public/javascripts/services/note_detail_render.js

@@ -11,7 +11,7 @@ class NoteDetailRender {
         this.$noteDetailRenderContent = ctx.$tabContent.find('.note-detail-render-content');
         this.$renderButton = ctx.$tabContent.find('.render-button');
 
-        this.$renderButton.click(() => this.render()); // long form!
+        this.$renderButton.on('click', () => this.render()); // long form!
     }
 
     async render() {

src/public/javascripts/services/note_detail_search.js

@@ -12,7 +12,7 @@ class NoteDetailSearch {
         this.$help = ctx.$tabContent.find(".note-detail-search-help");
         this.$refreshButton = ctx.$tabContent.find('.note-detail-search-refresh-results-button');
 
-        this.$refreshButton.click(async () => {
+        this.$refreshButton.on('click', async () => {
             await noteDetailService.saveNotesIfChanged();
 
             await searchNotesService.refreshSearch();

src/public/javascripts/services/note_type.js

@@ -50,7 +50,7 @@ export default class NoteTypeContext {
                 .attr("data-note-type", noteType.type)
                 .append('<span class="check">&check;</span> ')
                 .append($('<strong>').text(noteType.title))
-                .click(e => {
+                .on('click', e => {
                     const type = $typeLink.attr('data-note-type');
                     const noteType = NOTE_TYPES.find(nt => nt.type === type);
 
@@ -77,7 +77,7 @@ export default class NoteTypeContext {
                 .attr("data-mime-type", mimeType.mime)
                 .append('<span class="check">&check;</span> ')
                 .append($('<span>').text(mimeType.title))
-                .click(e => {
+                .on('click', e => {
                     const $link = $(e.target).closest('.dropdown-item');
 
                     this.save('code', $link.attr('data-mime-type'))

src/public/javascripts/services/search_notes.js

@@ -155,7 +155,7 @@ $searchInput.keyup(e => {
     const searchText = $searchInput.val();
 
     if (e && e.which === $.ui.keyCode.ESCAPE || $.trim(searchText) === "") {
-        $resetSearchButton.click();
+        $resetSearchButton.trigger('click');
         return;
     }
 
@@ -164,12 +164,12 @@ $searchInput.keyup(e => {
     }
 });
 
-$doSearchButton.click(() => doSearch()); // keep long form because of argument
-$resetSearchButton.click(resetSearch);
+$doSearchButton.on('click', () => doSearch()); // keep long form because of argument
+$resetSearchButton.on('click', resetSearch);
 
-$saveSearchButton.click(saveSearch);
+$saveSearchButton.on('click', saveSearch);
 
-$closeSearchButton.click(hideSearch);
+$closeSearchButton.on('click', hideSearch);
 
 export default {
     toggleSearch,

src/public/javascripts/services/sidebar.js

@@ -19,13 +19,13 @@ class Sidebar {
         this.$showSideBarButton = this.ctx.$tabContent.find(".show-sidebar-button");
         this.$hideSidebarButton = this.$sidebar.find(".hide-sidebar-button");
 
-        this.$hideSidebarButton.click(() => {
+        this.$hideSidebarButton.on('click', () => {
             this.$sidebar.hide();
             this.$showSideBarButton.show();
             this.ctx.stateChanged();
         });
 
-        this.$showSideBarButton.click(() => {
+        this.$showSideBarButton.on('click', () => {
             this.$sidebar.show();
             this.$showSideBarButton.hide();
             this.ctx.stateChanged();

src/public/javascripts/services/sync.js

@@ -16,7 +16,7 @@ async function syncNow() {
     }
 }
 
-$("#sync-now-button").click(syncNow);
+$("#sync-now-button").on('click', syncNow);
 
 async function forceNoteSync(noteId) {
     await server.post('sync/force-note-sync/' + noteId);

src/public/javascripts/services/tab_context.js

@@ -107,10 +107,10 @@ class TabContext {
         }
 
         this.$protectButton = this.$tabContent.find(".protect-button");
-        this.$protectButton.click(protectedSessionService.protectNoteAndSendToServer);
+        this.$protectButton.on('click', protectedSessionService.protectNoteAndSendToServer);
 
         this.$unprotectButton = this.$tabContent.find(".unprotect-button");
-        this.$unprotectButton.click(protectedSessionService.unprotectNoteAndSendToServer);
+        this.$unprotectButton.on('click', protectedSessionService.unprotectNoteAndSendToServer);
 
         await this.initComponent();
     }

src/public/javascripts/services/tree.js

@@ -911,10 +911,10 @@ async function duplicateNote(noteId, parentNoteId) {
 
 
 utils.bindGlobalShortcut('alt+c', () => collapseTree()); // don't use shortened form since collapseTree() accepts argument
-$collapseTreeButton.click(() => collapseTree());
+$collapseTreeButton.on('click', () => collapseTree());
 
-$createTopLevelNoteButton.click(createNewTopLevelNote);
-$scrollToActiveNoteButton.click(scrollToActiveNote);
+$createTopLevelNoteButton.on('click', createNewTopLevelNote);
+$scrollToActiveNoteButton.on('click', scrollToActiveNote);
 
 frontendLoaded.then(bundle.executeStartupBundles);
 

src/public/javascripts/widgets/attributes.js

@@ -15,7 +15,7 @@ class AttributesWidget extends StandardWidget {
 
     getHeaderActions() {
         const $showFullButton = $("<a>").append("show dialog").addClass('widget-header-action');
-        $showFullButton.click(async () => {
+        $showFullButton.on('click', async () => {
             const attributesDialog = await import("../dialogs/attributes.js");
             attributesDialog.showDialog();
         });
@@ -43,7 +43,7 @@ class AttributesWidget extends StandardWidget {
             const $showInheritedAttributes = $("<a>")
                 .attr("href", "javascript:")
                 .text("+show inherited")
-                .click(() => {
+                .on('click', () => {
                     $showInheritedAttributes.hide();
                     $inheritedAttrs.show();
                 });
@@ -51,7 +51,7 @@ class AttributesWidget extends StandardWidget {
             const $hideInheritedAttributes = $("<a>")
                 .attr("href", "javascript:")
                 .text("-hide inherited")
-                .click(() => {
+                .on('click', () => {
                     $showInheritedAttributes.show();
                     $inheritedAttrs.hide();
                 });

src/public/javascripts/widgets/calendar.js

@@ -49,13 +49,13 @@ class CalendarWidget extends StandardWidget {
         this.$next = $el.find('[data-calendar-toggle="next"]');
         this.$previous = $el.find('[data-calendar-toggle="previous"]');
 
-        this.$next.click(() => {
+        this.$next.on('click', () => {
             this.clearCalendar();
             this.date.setMonth(this.date.getMonth() + 1);
             this.createMonth();
         });
 
-        this.$previous.click(() => {
+        this.$previous.on('click', () => {
             this.clearCalendar();
             this.date.setMonth(this.date.getMonth() - 1);
             this.createMonth();

src/public/javascripts/widgets/link_map.js

@@ -20,7 +20,7 @@ class LinkMapWidget extends StandardWidget {
 
     getHeaderActions() {
         const $showFullButton = $("<a>").append("show full").addClass('widget-header-action');
-        $showFullButton.click(async () => {
+        $showFullButton.on('click', async () => {
             const linkMapDialog = await import("../dialogs/link_map.js");
             linkMapDialog.showDialog();
         });

src/public/javascripts/widgets/note_revisions.js

@@ -18,7 +18,7 @@ class NoteRevisionsWidget extends StandardWidget {
 
     getHeaderActions() {
         const $showFullButton = $("<a>").append("show dialog").addClass('widget-header-action');
-        $showFullButton.click(async () => {
+        $showFullButton.on('click', async () => {
             const attributesDialog = await import("../dialogs/note_revisions.js");
             attributesDialog.showCurrentNoteRevisions(this.ctx.note.noteId);
         });

src/public/javascripts/widgets/what_links_here.js

@@ -14,7 +14,7 @@ class WhatLinksHereWidget extends StandardWidget {
 
     getHeaderActions() {
         const $showFullButton = $("<a>").append("show link map").addClass('widget-header-action');
-        $showFullButton.click(async () => {
+        $showFullButton.on('click', async () => {
             const linkMapDialog = await import("../dialogs/link_map.js");
             linkMapDialog.showDialog();
         });