jQuery bind custom function to appended element
<p>I am trying to create a web app that will allow a user to define a custom JavaScript function and then add a button to their user interface that well preform that function.</p>

<p>Here is a sample of the code</p>

<pre><code>var customCommands = {
  command1: {
    text: 'Hello Console',
    cFunctionRun: function() {
      console.log('hello Console!');
    }
  },
  command2: {
    text: 'Hello World',
    cFunctionRun: function() {
      alert('hello World!');
    }
  }
}
</code></pre>

<p>Then I wrote a small function that loops though and builds the buttons and adds them to the user interface. The problem is when I append the elements to the user interface than click on the buttons nothing works...</p>

<p>Here is one of the methods I tried</p>

<pre><code>for (var cmd in customCommands) {
    command = customCommands[cmd];
    button = $('&lt;button/&gt;').html(command.text).on('click', 
      function(){ 
        console.log(command.text); 
        command.cFunctionRun(); 
      }
    );
}
buttonContainer.append(button);
</code></pre>

<p>Now my loop builds everything just fine and even the <code>.on('click')</code> works, but it always displays the text of the lasted added command?</p>

<p>here is <a href="http://jsfiddle.net/nbnEg/" rel="nofollow">http://jsfiddle.net/nbnEg/</a> to show what happens.</p>
