Question 240867 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How can I pass parameters in jquery to a on click function of a button dinamically created?

long time lurker here in need of help.

I have a class named button

class GameButton 
{
    constructor ( id, width, height, buttonFunction, attrs )
    {
                this._id = id
        this._width = width;
        this._height = height;
        this._attrs = attrs;
                this._buttonFunction = buttonFunction
    }

    append()
    {
        $( '#gameContainer' ).append( '<img id="' + this._id + '" src="">');
        $( '#' + this._id ).css( 'top', this._top + '%' );
        $( '#' + this._id ).css( 'left', this._left + '%' );
        $( '#' + this._id ).on( 'click', this._buttonFunction );
    }
}

It has more attributes but whatever. When I create instances of this class they work fine as long as no parameters are needed. I am lost here and some help will save my life

let startGame = function( language )
{
    some awesome code here
}
let buttonStart = new GameButton( 'start', 43, 0, startGame, 'myParamValue' );

Thanks in advance

I tried this

by doing the following

$( '#' + this._id ).bind( 'click', this._attrs, this._buttonFunction );

but doesn’t work

Tags:

2

Answers


  1. 0

    You had the right approach with the bind method that you mentioned.
    Perhaps you didn’t pick the value correctly in the passed function, since the params get bound to the event object and are not passed as stand-alone.
    This means you will be able to locate the params under event.data.

    I have created a sample runnable code that uses your question code as base and assuming everything else is working as intended to highlight the bind and param passing functionality.

    class GameButton 
{
    constructor ( id, width, height, buttonFunction, attrs )
    {
        this._id = id
        this._width = width;
        this._height = height;
        this._attrs = attrs;
        this._buttonFunction = buttonFunction
    }

    append()
    {
        $( '#gameContainer' ).append( '<img id="' + this._id + '" src="https://images.unsplash.com/photo-1587207433549-7d796bccc6a2">');
        $( '#' + this._id ).css( 'top', this._top + '%' );
        $( '#' + this._id ).css( 'left', this._left + '%' );
        // Bind the parameters to the click event
        $( '#' + this._id ).bind( 'click', this._attrs, this._buttonFunction); 
    }
}

let startGame = function( params )
{
    if (params.target){  //Checking if the passed params is an event
        data = params.data;
        $( '#clickOutput' ).html(data);
    }
}

let buttonStart = new GameButton( 'start', 43, 0, startGame, 'myParamValue' );
buttonStart.append();
    #start {
  height: 100px;
  width: 150px
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="gameContainer">
</div>
<div id="clickOutput">
</div>

    Once you click on the image, the passed param is displayed below the image in the designated container.

    Login or Signup to reply.
  2. 0

    You can use .on() to bind click event on parent container

    class GameButton 
{
    constructor ( id, width, height, buttonFunction, attrs )
    {
        this._id = id
        this._width = width;
        this._height = height;
        this._attrs = attrs;
        this._buttonFunction = buttonFunction

        ( '#gameContainer' ).on('click', 'img.gameButton', buttonFunction);
    }

    append()
    {
        $( '#gameContainer' ).append( '<img class="gameButton" id="' + this._id + '" src="https://images.unsplash.com/photo-1587207433549-7d796bccc6a2">');
        $( '#' + this._id ).css( 'top', this._top + '%' );
        $( '#' + this._id ).css( 'left', this._left + '%' );
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search