title: Dynamically set Mousetrap.bind() key combinations from an object
body: <p>I'm getting back data from our backend that contains information about keyboard shortcuts. This is a dumbed down version of what I will receive: </p>
  
  <pre><code>    { code: "r", message: "test R" },
      { code: "s", message: "test S" },
      { code: "c", message: "test C"}
  </code></pre>
  
  <p>The 'Code' specifies which key will activate the keyboard shortcut, and the message is what will be pasted in an input box. </p>
  
  <p>I am using the <a href="https://craig.is/killing/mice" rel="nofollow noreferrer">Mousetrap</a> library, which allows me to write functions like so: </p>
  
  <pre><code>Mousetrap.bind('shift+^+r', function () {
      alert("test");
  });
  </code></pre>
  
  <p>My question is: is there a way to write these functions at runtime based on the data brought back? So for every item in the JSON object, a function will be needed to handle the shortcut. </p>
  
  <p>I've tried this: </p>
  
  <pre><code>    var html = document.getElementById("shortcuts").innerHTML;
      document.getElementById("shortcuts").innerHTML = html + "&lt;script&gt; Mousetrap.bind('shift+^+r', function () { alert('test) })); &lt;\/script&gt;"
  </code></pre>
  
  <p>I don't know if this is good practice, as I am still quite new to JS, but this was the only thing I could come up with. It doesnt work though. </p>