The issue with the `this` keyword in a jquery event handler when using Typescript

Question

The issue with the `this` keyword in a jquery event handler when using Typescript

Here is my TypeScript code snippet.

class something {
    createSomething(): JQuery {
        let result = $('<div>');
        $('<input>').on('change paste keyup', () => {
            this.myProperty = $(this).val;
            this.change();
        }).appendTo(result);
        return result;
    }
    myProperty: string;
    change() {
        alert('yeah');
    } }

In the handle function, the issue arises when trying to access both 'this' and '$(this)' simultaneously.

What would be the best approach to solve this problem?

javascript jquery typescript

Answer 1

Answer №1

Perhaps a traditional approach using plain javascript along with regular functions instead of arrow functions might be the solution for this issue.

    var self = this;
    $('<input>').on('change paste keyup', function() {
                self.myProperty = $(this).val;
                self.change();
            }).appendTo(result);

Answer 2

Perhaps a traditional approach using plain javascript along with regular functions instead of arrow functions might be the solution for this issue.

    var self = this;
    $('<input>').on('change paste keyup', function() {
                self.myProperty = $(this).val;
                self.change();
            }).appendTo(result);

Answer 3

Answer №2

Try using this method

generateElement(): JQuery {
    let instance = this;
    let newElement = $('<span>');
    $('<button>').on('click', function() {
        instance.property = $(this).val();
        instance.update();
    }).appendTo(newElement);
    return newElement;
}

Answer 4

Try using this method

generateElement(): JQuery {
    let instance = this;
    let newElement = $('<span>');
    $('<button>').on('click', function() {
        instance.property = $(this).val();
        instance.update();
    }).appendTo(newElement);
    return newElement;
}

The issue with the `this` keyword in a jquery event handler when using Typescript

Answer №1

Answer №2

Similar questions

Add information in the JSON structure

The Lenis smooth scrolling feature (GSAP) is not functioning properly

I'm having trouble getting my asynchronous function to work properly. All I want is for it to display the results of the MongoDB query in the console

The jQuery UI Tab is failing to scroll within its container

Is there a way for me to add a clickable link within a tooltip?

What strategies can be utilized to raise the max-height from the bottom to the top?

Having trouble appending array elements to table rows using jQuery

When using dynamic handler assignment within useEffect, the updated state is not reflected in the handler

Can node JS code be written on the client side in Meteor 1.3?

Change the position of an array element when displayed on an HTML page

Struggling with implementing nested for loops

Simple guide to decoding JSON in React Native

Integrating tooltips on Dimple.js line charts

What steps should be taken to resolve the error message "EROFS: read-only file system, attempting to open '/var/task/db.json'?"

Verify if the value of localStorage matches the specified value, then conceal the element

Is it possible for me to interact with different elements upon hovering?

How to locate and interact with the submitName element using Selenium WebDriver

Identifying the specific promise that failed within a chain of .then statements

Ways to conceal one message within another

Grails array using jQuery autocomplete with findByAll() function