title: Pass javascript function as data-* attribute and execute
body: <p>We know such syntaxes as below, when defining a <code>value</code> for <code>onClick</code> attribute:</p>
  
  <pre><code>&lt;button type="submit" onclick="alert('hi');"&gt;&lt;/button&gt;
  &lt;button type="submit" onclick="doWork"&gt;&lt;/button&gt; &lt;!-- This one doesn't work --&gt;
  &lt;button type="submit" onclick="doWork()"&gt;&lt;/button&gt;
  &lt;button type="submit" onclick="doWork('Mike', 2)"&gt;&lt;/button&gt;
  </code></pre>
  
  <p>What I'm interested in is to define a custom <code>data-attribute</code> and execute the value as follows:</p>
  
  <pre><code>&lt;button type="submit" data-callback="alert('hi');"      class="marker"&gt;&lt;/button&gt;
  &lt;button type="submit" data-callback="doWork"            class="marker"&gt;&lt;/button&gt;
  &lt;button type="submit" data-callback="doWork()"          class="marker"&gt;&lt;/button&gt;
  &lt;button type="submit" data-callback="doWork('Mike', 2)" class="marker"&gt;&lt;/button&gt;
  
  &lt;script type="text/javascript"&gt;
      jQuery("body").on("click","button.marker", function(e) {
          var callback = jQuery(e.currentTarget).data("callback");
  
          // Now I need to execute the callback no matter of the format
          // 1. Execute as function's body
          // 2. Or by function 'name'
          // 3. Or by function 'name' with 0 parameters
          // 4. Or by function 'name' with n parameters
      })
  
      function doWork(name, nr){
          var personName = name || "Unnamed";
          var personNr = nr || 0;
          alert("Name is: " + personName + " Nr: " + personNr);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I've pasted the sample to <a href="http://jsbin.com/bebosuyuye/1/edit?html,js,output">jsBin</a></p>
  
  <h2>How to accomplish same behaviour using custom data-attributes?</h2>