backbone.js - mouseover kills events on views - events

Question

This is a simple todo app that currently only lists a few li views within a ul collection view. I am trying to cause the click event to fire a simple showAlert function
If I keep my mouse over one of the task views(li) and refresh the page so that my mouse ends up hovering over that specific li once reloaded, the click event will fire off my showAlert function.
The problem is once I move my mouse(most likely triggering a mouseover event), I lose the click event on all task views(li) including the view I was initially hovering over.
Based on all posts I could find closely related to this problem, I've tried using this.delegateEvents() in various places, with no luck.
Preceding code
(function() {
window.App = {
Models: {},
Collections: {},
Views: {}
};
window.template = function(id) {
return _.template( $('#' + id).html() );
};
App.Models.Task = Backbone.Model.extend({});
App.Collections.Tasks = Backbone.Collection.extend({
model: App.Models.Task
});
App.Views.Tasks = Backbone.View.extend({
tagName: 'ul',
render: function() {
this.collection.each(this.addOne, this);
return this;
},
addOne: function(task) {
var taskView = new App.Views.Task({ model: task });
this.$el.append(taskView.render().el);
}
});
This is the view in question
App.Views.Task = Backbone.View.extend({
tagName: 'li',
events: {
'click': 'showAlert'
},
showAlert: function() {
alert('yes!');
},
render: function() {
this.$el.html( this.model.get('title') );
return this;
}
});
proceeding code
var tasksCollection = new App.Collections.Tasks([
{
title: 'Task 1',
priority: 3
},
{
title: 'Task 2',
priority: 4
},
{
title: 'Task 3',
priority: 5
}
]);
var tasksView = new App.Views.Tasks({ collection: tasksCollection });
$('.tasks').html(tasksView.render().el);
})();