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

5 Answers 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>