Attach a callback function to a dynamically created button [JS]

Question

I have this function:

create({
  text: 'Confirm',
  callback: function(){
    location.reload();
  }
});

function create(options){
   $('div').append('<button>'+options.text+'</button>');
}

When you click the button I want to execute the callback function I passed. How can I do that? Is it possible with the function being an anonymous function or do I have to name it? For example, I can name it and then change the line of the append code to:

$('div').append('<button onclick="'+options.callbackName+'()">'+options.text+'</button>');

and then create a function with that name and instead of passing a function, passing a string with the name, but I'd prefer the first option.

quirimmo · Accepted Answer · 2017-08-27 19:38:27Z

5

Create your jQuery element assigning it to a variable and then use the jQuery on method in order to bind your callback to the given function:

function create(options) {
  let button = $(`<button>${options.text}</button>`);
  button.on('click', options.callback);
  $('#container').append(button);
}

function append() {
  create({
  text: 'Confirm',
  callback: function() {
    //location.reload();
    alert('Hello World');
  }
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>
<button onclick="append()">Append</button>

answered Aug 27, 2017 at 19:38

quirimmo

10k3 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stephen Thomas · Accepted Answer · 2017-08-27 19:38:30Z

1

var btn = $("<button>"+options.text+"</button>");
$("<div>").append(btn);
btn.on("click", options.callBack);

answered Aug 27, 2017 at 19:38

Stephen Thomas

14.1k2 gold badges35 silver badges53 bronze badges

Comments

adz5A · Accepted Answer · 2017-08-27 19:50:25Z

Following your code snippet you could update it to :

create({
    text: 'Confirm',
    callback: function(){
        location.reload();
    }
});

function create(options){
    var $button = $("<button>");
    if ( typeof options.callback === "function" ) {

        $button.on("click", options.cb);

    }
    if ( typeof options.text === "string" ) {

        $button.text(options.text);

    }
    $('div').append($button);
    return $button;
}

Your create function, steps by steps, now does the following :

creates a button element
if options.callback is a function then attaches it
if options.text is a string then set it as textNode inside.
returns the created button for convenience

As a side note, on your last remark : this would mean leaking references on the global scope as inline callbacks are executed within the global scope. Probably not what you want. You generally want to avoid this pattern, IMO the only use case for purposely leaking reference of your function on the global scope is JSONP, but that is an entirely different use case :)

Benni · Accepted Answer · 2017-08-27 19:57:00Z

1

You can wrap the callback function into an immediately invoked function expression (IIFE):

function create(options){
    $('div').append('<button onclick="(' + options.callback + ')()">' + options.text + '</button>');
}

create({
    text: 'Confirm',
    callback: function(){
        alert('Hello');
    }
});

That way you are also able to pass the event object to the callback:

onclick="(function(event){console.log(event.target)})(event)"

edited Aug 27, 2017 at 19:57

answered Aug 27, 2017 at 19:43

Benni

1,04311 silver badges16 bronze badges

Comments

vicky patel · Accepted Answer · 2017-08-28 10:42:57Z

1

 function append(){
        var btn = $('<button>Button</button>');
        $(btn).click(function(){
        alert('Text');
        })
        btn.appendTo($("#container"));
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>
<button onclick="append()">Append</button>

answered Aug 28, 2017 at 10:42

vicky patel

7052 gold badges8 silver badges14 bronze badges

Collectives™ on Stack Overflow

Attach a callback function to a dynamically created button [JS]

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related