What is the best way to connect click events with ExtJS template elements?

Is there a way to assign a click event to each link tag without directly embedding onclick=.... in the XTemplate code?

new Ext.XTemplate(
    '<ul>',
    '<tpl for="."><li><a href="#{anchor}">{text}</a></li></tpl>',
    '</ul>'
).overwrite('someElement', [
    { text: 'Click me', anchor: '1' },
    { text: 'No, click me', anchor: '2'}
]);

Answer №1

The easy solution is to avoid directly binding events to elements. Instead, consider using event delegation:

document.querySelector('#someElement').addEventListener('click', function(event) {
    console.log(event.target);
}, false);

There are 2 major benefits to this approach:

  1. You only need one event listener for multiple elements
  2. It remains functional even when the content is dynamically updated

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to setting up value observation in React Context for optimal functionality

Imagine a scenario where there is a Parent Component that provides a Context containing a Store Object. This Store holds a value and a function to update this value. class Store { // value // function updateValue() {} } const Parent = () => { const ...

Uncovering a particular property within an array with the help of EJS

I am still learning about ejs and javascript. I have an ejs file where I want to display a list of array objects with unique properties. My goal is to iterate through the array's length, check if a specific property matches a string, and then display ...

Youtube video embedding showing cut edges on smaller screens

Looking for assistance with a Next.js and tailwind site I am building. Having trouble getting the video component to display properly on mobile screens. Tried various fixes but the video still gets cut off on smaller screen sizes. If anyone has a soluti ...

Is there a library available that can assist me in writing JavaScript code within C#?

Currently, I am in search of a tool that can assist me in writing C# code that will automatically convert to JavaScript. The main benefits I am seeking are improved code-completion and type-safety. Specifically, I am interested in the following features: ...

Why is my MongoDB $match aggregation query not returning results within a specified date range?

I have been struggling with a MongoDB aggregation query that is not returning any results, just an empty array. It seems like the issue lies in how it's processing the date range. Oddly enough, when I use PriceHourly.find({ date: { $lt: end, $gt: sta ...

One way to create dynamic function parameters in JavaScript is by using

Currently, I am in the process of implementing a payment API checkout feature on my order.html page. However, I have encountered an issue where I need to add a script in the head of the HTML document. This script requires me to specify the subtotal amoun ...

JavaScript decimal precision function malfunctioning with currency format conversion

My current snippet works perfectly with the currency format 249.00, but I need to adapt it for a site that uses euros with pricing in the format 249,00. When I make this change, the total calculation goes haywire and shows as 29.900,00. Can someone advise ...

Please verify the utilization of jQuery.ajaxSettings.xhr

var _orgAjax = jQuery.ajaxSettings.xhr; jQuery.ajaxSettings.xhr = function () { var xhr = _orgAjax(); DoSomeLogging(); return xhr; }; I came across this code snippet and I'm trying to make sense of it. Does this mean that any $.ajax(...) ...

Tips for showcasing information entered into text fields within a single container within another container

After creating three divs, the first being a parent div and the next two being child divs placed side by side, I encountered an issue with displaying input values. Specifically, I wanted to take values from input text boxes within the second div (floatchil ...

What are some ways to include additional data besides the new value in a change event for an input field?

Currently, I am using VueJS to dynamically generate a form based on a JSON schema and then attempting to save the data into my Vuex state. Here is an overview of the code I have written so far (simplified): <div v-for="field in schema" :key=& ...

Setting the passport state dynamically to enable redirection upon a callback

After finding out from a source on Stack Overflow how to use the state parameter in Google oauth2 with PassportJS and Express, I wanted to ensure that when a user is redirected back to my Node App after signing in through Google, they are taken back to the ...

Angular2: Issue encountered while processing click event

When I click a button on my client application, it sends a request to the server I created using Express. The request handler in the server simply logs 'Delete from server' every time the button is clicked. I am encountering these errors when cl ...

Concealing UI elements within the primary stack during navigation to a nested stack in React navigation

Is there a way to hide the user interface in my main stack when I switch to the nested drawer stack? I am currently facing an issue where the header from my main stack appears above the header in my nested stack when I navigate to a screen using: navigat ...

mongojs implementation that allows for asynchronous query execution without blocking

Forgive me for asking what may seem like a silly question, but I am struggling to make this work. Currently, as part of my learning journey with node.js and mongojs, I have encountered the following issue: Below is my server.js file server.get("/", funct ...

Transmitting an HTML file along with JSON data and enabling the browser to refresh the JSON data without reloading the entire

I'm currently working on a project involving a browser-server program where the browser sends an http get request to ''. The server is expected to return both an HTML page and a JSON response. I attempted using res.render(), passing the JSON ...

Utilize the map function on an array object to present data in a table using React framework

My parent component passes an array object that looks like this: I want to organize these values into a table with the keys in one column and their corresponding values in other columns. The desired format is shown here: To achieve this, I am currently i ...

AngularJS closes when clicked outside

I've been attempting to add a close on outside click functionality to my code, similar to this example: http://plnkr.co/edit/ybYmHtFavHnN1oD8vsuw?p=preview However, I seem to be overlooking something as it's not working in my implementation. HT ...

Update the ng-model in AngularJS when the value is set to true

Hello there, I am in the process of developing an app that provides a summary of data from a database. In this app, there is a form that populates input fields with information using ng-model. Users can edit these values as needed. However, I want to ensu ...

Working with double quotes within variable in JavaScript

I am currently working on dynamically creating HTML tags using JavaScript. Please take a look at the code snippet below: function getPhotosSuccess(data) { if (data.d.results.length > 0) { var response = data.d.results; var innerht ...

Is there a way to prevent the slide-out bar from automatically hiding when selecting an item from its list?

I am facing an issue with my dashboard that has a slideout sidebar. Whenever I press the toggle button, the sidebar slides out as expected. However, when I click on any tab within the sidebar, it hides again. I only want it to hide when toggled. My code is ...