Pass javascript function as data-* attribute and execute

One way is to use eval()

jQuery(".container").on("click", "button.marker", function (e) {    var callback = jQuery(e.currentTarget).data("callback");    var x = eval(callback)    if (typeof x == 'function') {        x()    }});

Demo: Fiddle

Note: Make sure it is safe in your environment, ie there is no possibility of script injection because of bad input from users

• Why is using the JavaScript eval function a bad idea?
• When is JavaScript's eval() not evil?
• eval() isn’t evil, just misunderstood
• Eval is Evil, Part One

I think a better idea would be to dynamically bind the events and trigger them. If you wanted them to only be known by other code, you could use custom events.

<button type="submit" class="marker marker1"></button><button type="submit" class="marker marker2"></button><button type="submit" class="marker marker3"></button><button type="submit" class="marker marker4"></button><script>    var $markers = $('.marker');    $markers.filter('.marker1').bind('customCallback', function(){ alert("hi"); });    $markers.filter('.marker2').bind('customCallback', function(){ doWork(); });</script>

Then your other components could invoke them with $(selector).trigger('customCallback');

Simply with :

 $("body").on("click","button.marker", function(e) {     eval($(this).data("callback")); })