Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
​
  <head>
<meta name="description" content="Render Backbone view after click" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
    <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
</head>
​
  <body>
    <p><a href="http://stackoverflow.com/questions/12235267/jquery-click-event-is-fired-on-document-load">original</a></p>
    <div id="someElement">
      <button id="someButton">Click to render view </button>
    </div>
    
    <script>
      MyView = Backbone.View.extend({
        events: {
          "click #someButton": "clicked"
        },
        clicked: function (e) {
          e.preventDefault();
          // alert("I was clicked!");
          this.render();
        },
        render: function () {
          var html = "generate some HTML, here";
          $(this.el).html(html);
        }
      });
​
      $(function () {
        // pass the 'el' property so our view events map properly
        var myView = new MyView({el:'#someElement'});
        // myView.render();
        // $("#someElement").html(myView.el);
      });
    </script>
  </body>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
squaretonepro
0viewers