this object and its counterpart within a click event

Question

this object and its counterpart within a click event

I created my own JavaScript class and tried to use jQuery's $(this) and object-this in a click event.

jQuery's $(this) works fine, but the object-this is not defined.

var myclass = function(){

    this.myfunction = function(){
        alert('myfunction');
    }

    this.buttonclicked = function(){
        alert('buttonclicked');
    }

    this.writeout = function(){
        var buttoncode = '<button class="mybutton">click</button>';
        $('body').append(buttoncode);

        $('.mybutton').click(function(){
            alert('Button: '+$(this).attr('class'));
            this.buttonclicked(); 
        });

        this.myfunction();
    }

}


var x = new myclass();
x.writeout();

When I click the appended button, I get an alert with the classname of the Button, but my function "this.buttonclicked" seems not to be a function.

Any suggestions?

jquery function this

Answer 1

Answer №1

This denotes the element that triggered the event in the event handler. To prevent any confusion, you can store the current object in a separate variable for future use.

Implement it like this:

this.displayButton = function(){
    var buttonHTML = '<button class="mybutton">click</button>';
    $('body').append(buttonHTML);

    var _self = this; //store current object

    $('.mybutton').click(function(){
        alert('Button: '+ $(this).attr('class')); //In this context, 'this' refers to the clicked element.

        _self.buttonClicked(); //Access cached object
    });

    this.myFunction();
}

Updated Example

Answer 2

This denotes the element that triggered the event in the event handler. To prevent any confusion, you can store the current object in a separate variable for future use.

Implement it like this:

this.displayButton = function(){
    var buttonHTML = '<button class="mybutton">click</button>';
    $('body').append(buttonHTML);

    var _self = this; //store current object

    $('.mybutton').click(function(){
        alert('Button: '+ $(this).attr('class')); //In this context, 'this' refers to the clicked element.

        _self.buttonClicked(); //Access cached object
    });

    this.myFunction();
}

Updated Example

this object and its counterpart within a click event

Answer №1

Similar questions

Encountering undefined data when trying to access returned JSON data through jQuery Ajax

What is the best method to compare dates in JavaScript/JQuery to determine if one comes before the other?

Check if a key exists in an array that contains sub-arrays using the function array_key_exists

Error when spaces are present in the formatted JSON result within the link parameter of the 'load' function in JQuery

The final value is always returned by jQuery's each method

I'm having issues with my flipclock moving too quickly and skipping over certain numbers. Any suggestions on how to resolve this issue?

Challenges encountered when redirecting users with a combination of javascript and php

Is there a way for me to display a gif similar to 9GAG on my

Ways to prevent other users from clicking or modifying a particular row

Ways to retrieve the chosen option in a dropdown list without specifying the dropdown's name, id,

Load ajax content dynamically based on the updated URL

Interconnected Dropdown Menus

Unable to obtain the accurate response from a jQuery Ajax request

Is there a way to modify AJAX response HTML and seamlessly proceed with replacement using jQuery?

Two separate tables displaying unique AJAX JSON response datasets

Using brush strokes to create a unique design on the canvas page

The submit function in Jquery is not functioning properly within the success callback of an Ajax request

Creating a dropdown menu by specifying specific names within an object

Choose a dynamically generated html element without having to click on it

Endless cycle within the while loop without any obvious cause