title: Where to add events to buttons with typescript?
body: <p>Where do I add events to buttons, input fields etc? I ask because I want to hold as much JS/jQuery away from my view. Right now this is what I do: </p>
  
  <p>I have my view: </p>
  
  <pre class="lang-html prettyprint-override"><code>@Scripts.Render("~/Scripts/Application/Currency/CurrencyExchangeRateCreate.js?" + DateTime.Now.Ticks.ToString())
  
  &lt;script&gt;
      var x = new CurrencyExchangeRateCreate();
      var createUrl = @Url.Action("Create", "Currency"),
          indexUrl = @Url.Action("Index", "Currency");
  &lt;/script&gt;
  </code></pre>
  
  <p>And my typescript class    </p>
  
  <pre><code>var createUrl, indexUrl;
  class CurrencyExchangeRateCreate {
      private form: JQuery = $("#createForm");
      private submitButton: JQuery = $("#submitButton"); 
  
      constructor() {
          var self = this;
          this.submitButton.on("click", function () {
              self.Create();
          })
      }
  
      public Create() {
          var self = this;
          var ajaxOptions: JQueryAjaxSettings = {
              async: true,
              url: createUrl,
              data: self.form.serialize(),
              method: "POST",
              global: true,
              success: function () {
                  window.location.href = indexUrl;
              },
              error: function () {
              }
          }    
          $.ajax(ajaxOptions);
      }    
  }
  </code></pre>
  
  <p>Like you can see I have a form which I can submit on click of a button, but this button click event must be bound somewhere. If I do it in the constructor then I have to instantiate the new class as I did right now. Is it the right way to do this, or are there any better ways?</p>