Javascript MVC Controller and Click Events

Question

I'm having a problem with the click events not working using a Javascript MVC Controller.

TEST.Assignments.AssignmentsController = function (element) {

var elements = {
    activeAssignmentsPanel: $('#lpn-activeAssignments_Cont'),
    assignmentViewLink: $("#lpn-activeAssignments_Cont table tr th a")
};

var _this = this;
var model = new TEST.Assignments.AssignmentModel();

this.buildAssignmentsList = function () {
    var assignments = model.getActiveAssignmentsList({
        assignmentMode: "active",
        mock: true,
        success: function (data) {
                dust.render("ActiveAssignmentsPanel", data, function(err, out) {
                elements.activeAssignmentsPanel.append(out);
            });
        }
    });
};

this.getAssignmentDetails = function(assignmentId) {
    console.log(assignmentId);
};

//bind all events
elements.assignmentViewLink.click(function (e) {
    console.log("blah");
    console.log($(this).data("assignmentKey"));
});


};//end assignments controller


$(function () {
    var assignmentsController = new TEST.Assignments.AssignmentsController();
    assignmentsController.buildAssignmentsList();
});

If you look at the //bind events, I have a click function there that should be working. But it is not. The constructor is being called and the elements are traced out correctly. Any idea why the click event won't work?

Answer 1

I assume the assignmentViewLink elements are created and appended in the success callback. If so, it looks like a sequence problem. When you bind the click event, the assignmentViewLink elements have not been created yet, and hence, the click eventhandler isn't attached.

//bind all events
// assignmentViewLink is empty []
elements.assignmentViewLink.click(function (e) {
  console.log("blah");
  console.log($(this).data("assignmentKey"));
});

To verify this, move the elements.assignmentViewLink(...) into the success callback.