javascript - Attach a callback function to a dynamically created button [JS] - Stack Overflow

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.

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.

• javascript
• jquery

Share Improve this question Follow edited Dec 20, 2024 at 10:15 Stephen Ostermiller♦ 25.6k1717 gold badges9595 silver badges115115 bronze badges asked Aug 27, 2017 at 19:25 nicknick 3,28766 gold badges4343 silver badges8585 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>
<button onclick="append()">Append</button>

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

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 :)

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)"

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

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