title: backbone.js click event not firing when new DOM element is added by view
body: <p>I have written a simple program to create form post. When a new post is created the title is added to document and when clicked on the title, click event works and shows an alert. when i create another post it's title also shows up with title of the first post but, none of them popup an alert when clicked.</p>
  
  <pre><code> var PostModel = Backbone.Model.extend({
              defaults: {
                  "title": "",
                  "postTxt":""
              }
          });
  
          &lt;!-- Collection --&gt;
  
          var PostCollection = Backbone.Collection.extend({
              url: '/UserPosts',
              model: PostModel
          });
  
          &lt;!-- Views --&gt;
  
          var PostModelView = Backbone.View.extend({
              model: new PostModel(),
              tagName: 'li',
              template: _.template($('#post-title').html()),
              initialize: function() {
                  console.log('Initialized PostModelView........');
              },
              events: {
                 'click a' : 'showAlert'
              },
              showAlert: function(){
                  console.log('event');
                  alert("You clicked : " + this.model.get('title'));
              },
              render: function() {
                  console.log('Running render() of PostModelView.....');
                  var htmloutput = this.template(this.model.toJSON());
                  this.$el.html(htmloutput);
                  return this;
              }
          });
  
          var postmodelview = new PostModelView();
          var postcollection = new PostCollection();
  
          var PostCollectionView = Backbone.View.extend({
              collection: postcollection,
              tagName: 'ul',
              initialize: function() {
                  console.log('Initialized PostCollectionView .......');
                  this.collection.on('add', this.render, this);
                  this.collection.on('remove', this.render, this);
                  console.log('postcollectionview $el: ' + this.$el.html());
              },
  
              render: function() {
  
  
                this.collection.each(function(postmodel) {
                    console.log(JSON.stringify(postmodel));
                    var postmodelview = new PostModelView({model: postmodel});
                    console.log(JSON.stringify(postmodelview));
                    //var htmlout = postmodelview.render().$el;
                     var htmlout = this.$el.append(postmodelview.render().$el);
                    $('#postcontainer').html('');
                    $('#postcontainer').append(htmlout);
                    //this.$el.append(htmlout);
  
                },this);
  
                return this;
  
              }
          });
  
  
  
          function createPost() {
  
              var postcollectionview = new PostCollectionView();
              console.log('running creatPost()');
              var postmodel = new PostModel({ title: $('#title').val(), postTxt: $('#postTxt').val() });
              postcollection.create(postmodel);
              console.log("postcollection: " + JSON.stringify(postcollection.toJSON()));
               $('#title').val(''); //clears the input field
               $('#postTxt').val(''); // clears the input field
  
         }
  </code></pre>