Adding Event Listeners

Adding Buttons with Event Listeners

When an element is added to the DOM using a hook, you must wait for the element to be added before you can attach an event listener to it. Using the setTimeout function with an interval of 0 achieves this.

An element can be added via a hook as a template literal, a DOM element, or a jQuery object. The plugin automatically handles each type correctly. A hook should always return a single type; mixing types is not supported. Please note that not all hooks support adding elements. This functionality only works if the hook is designed to return an element. You can consult the documentation to see which hooks support this.

Below you'll find three buttons, all performing the same functionality. Each implementation returns a different element type.

The required arguments (...) depend on the specific hook used.

✨ Adding a Button Using a Template Literal

((...) => {
  
    const buttonId = 'custom-btn-' + Date.now()
    
    setTimeout(() => {

        const button = document.getElementById(buttonId)
        if (button) {
            button.addEventListener('click', () => {
                app.setColumnValue('location', 'NEW-LOCATION')
            })
        }

    }, 0)
    
    return `<button id="${buttonId}">
        UPDATE LOCATION
    </button>`
  
})

✨ Adding a Button Using Vanilla JavaScript

((...) => {

    const buttonId = 'custom-btn-' + Date.now()
  
    const button = window.document.createElement("button")
    button.id = buttonId
    button.innerHTML = "UPDATE LOCATION"

    setTimeout(() => {
        const buttonElement = document.getElementById(buttonId)
        button.onclick = function() {
            app.setColumnValue('loc', 'NEW-LOCATION')
        }
    }, 0)
  
    return button
  
})

✨ Adding a Button Using jQuery

((...) => {
  
    const buttonId = 'custom-btn-' + Date.now()
    
    const button = jQuery('<button>', {
        id: buttonId,
        text: 'UPDATE LOCATION'
    })
    
    setTimeout(() => {
        jQuery('#' + buttonId).on('click', function() {
            app.setColumnValue('loc', 'NEW-LOCATION');
        })
    }, 0)
    
    return button[0]
  
})

Using Global Functions to Add Buttons with Event Listeners

The global hook can be used to implement reusable functions for adding buttons. The following examples perform the same functionality as the previous ones but use global functions.

✨ Adding a Button Using a Template Literal

function templateButton(app) {
  
    const buttonId = 'custom-btn-' + Date.now()
    
    setTimeout(() => {

        const button = document.getElementById(buttonId)
        if (button) {
            button.addEventListener('click', () => {
                app.setColumnValue('location', 'NEW-LOCATION')
            })
        }

    }, 0)
    
    return `<button id="${buttonId}">
        UPDATE LOCATION
    </button>`
  
}

✨ Adding a Button Using Vanilla JavaScript

function jsButton(app) {

    const buttonId = 'custom-btn-' + Date.now()
  
    const button = window.document.createElement("button")
    button.id = buttonId
    button.innerHTML = "UPDATE LOCATION"

    setTimeout(() => {
        const buttonElement = document.getElementById(buttonId)
        button.onclick = function() {
            app.setColumnValue('loc', 'NEW-LOCATION')
        }
    }, 0)
  
    return button
  
}

✨ Adding a Button Using jQuery

function jqueryButton(app) {
  
    const buttonId = 'custom-btn-' + Date.now()
    
    const button = jQuery('<button>', {
        id: buttonId,
        text: 'UPDATE LOCATION'
    })
    
    setTimeout(() => {
        jQuery('#' + buttonId).on('click', function() {
            app.setColumnValue('loc', 'NEW-LOCATION');
        })
    }, 0)
    
    return button[0]
  
}