SO - 30028331

by Arun P Johny

HTML

<section class="container">
    <div class="native">
         <h2>Native onClick:</h2>

        <button type="submit" onclick="alert('hi');">Alert</button>
        <button type="submit" onclick="doWork">doWork</button>
        <button type="submit" onclick="doWork()">doWork()</button>
        <button type="submit" onclick="doWork('Mike', 2)">doWork('Mike',2)</button>
    </div>
    <div class="custom">
         <h2>Custom data-callback:</h2>

        <button type="submit" data-callback="alert('hi');" class="marker">Alert</button>
        <button type="submit" data-callback="doWork" class="marker">doWork</button>
        <button type="submit" data-callback="doWork()" class="marker">doWork()</button>
        <button type="submit" data-callback="doWork(this, 2)" class="marker">doWork(this,2)</button>
    </div>

JavaScript

function doWork(name, nr) {
    var personName = name || "Unnamed";
    var personNr = nr || 0;

    console.log("Name is: " + personName + " Nr: " + personNr);
}
jQuery(".container").on("click", "button.marker", function (e) {
    var callback = jQuery(e.currentTarget).data("callback");

    var x = eval(callback)
    //to handle the function reference
    if (typeof x == 'function') {
        x()
    }
});