Reference Element Class in Plugin Editor

I’m trying to apply an event listener to a class of multiline inputs. I have installed the classify plugin and added a class to the relevant inputs. My plugin has a field called listenerClass, where I can put in the class name of the multilines. Right now, I have added this event listener into the update function. It works perfectly except it always runs twice. I guess I could add a counter to only run every second time, but I’m not sure how reliable that would be. Does anyone have any suggestions, so that I only trigger an event once?

function(instance, properties, context) {

    function enterPressed (e) {

        if(e.keyCode == 13 && e.target.matches("." + properties.listenerClass)) {

            e.preventDefault();    

            if (event.repeat == false) {

                console.log("Fired")

            }
        }
    }

    document.addEventListener('keydown', enterPressed)

}

You are correct. You need to keep an initialization variable and if it is true don’t add the listener again. You can use instance.data.init = 1 (or something like that).

I added instance.data.init = 1 into the initialize function and then wrapped my update function in an if statement:

if (instance.data.init = 1) {

\\ Run Event Listener

instance.data.init = 0

}

However, it’s still firing twice. Any idea why that would be?

Why not add the listener in the initialize() function instead of the update() function?

I can’t access the properties object from the initialize function. For my case, I have multiple classes with the event listener, so I need a field on the element where I can add the class.

I did try another method where I added the event listener to the element ID (as opposed to a class) using the initialize function. However, if I deleted a row in my repeating group and later added a new row, the instance from the previous row remained, so the event listener wouldn’t run again. I mention the issue in more depth here:

I don’t quite understand the need to assign a class.

Strictly speaking, classes can’t have listeners. Listeners are attached to DOM elements, and Bubble hands you a reference to the DOM element representing your plugin element’s instance.

I have multiple multiline inputs on the page. I want to apply the event listener to two sets of multiline inputs, while the third set I want to behave normally (i.e. I don’t want to apply the event listener). So, I can’t use a selector like $("textarea") because it will apply to all the multiline inputs on the page. I need a way to distinguish between multiline inputs, which is why I opted for classes. The only other method I came up with is assigning a listener to each ID attribute, but that seemed more convoluted.

Could you put your listener function and the if statement in the initialize function and pass the properties you need as parameters from the update function?

This way, even if the update fires twice, the if statement in the initialize function will ensure that the listener function only runs once.

Regardless of where the listener gets attached, the solution is to simply not execute it twice. In initialize, initialize the initialized state (how many times can you use the same word in one sentence, one wonders):

instance.data.initialized = null (or false, your pick, same thing)

Then, in update, do a bunch of stuff and then, at the very end, set:

instance.data.initialized = true

NEVER SET IT BACK TO FALSE, right? That’s your issue here (why would you unset it? the whole point is to set it once and remember the state): Reference Element Class in Plugin Editor - #3 by ladd0393

:point_up:UMMM… no.

1 Like

Also, don’t use 0 and 1 as proxies for booleans. Just use true and false or true and null (my personal preference, for reasons).

1 Like

This was the correct solution. Seems like a silly mistake now :upside_down_face: Many thanks!

1 Like