Hi all,
I'm trying to build a simple messaging interface.
I have a table with messages recieved, and upon clicking a message, a
modal will apear with the content of the message as the modal body
In the footer, I have a 'Reply' and 'Cancel' buttons, and the reply
button has a click event attached.
If I click a message to trigger the modal, then click cancel, and then
click the message again, the on('show') event triggers twice, and the
event that I attached to the reply button triggers 3 times.
So, given this code:
$("table.messages tbody tr").click(function(){
var row = this;
var message_modal = $("#message-container");
var composer_modal = $("#message-composer");
message_modal.on('show', function(){
log("PREPARE MESSAGE DISPLAY.");
var reply_button = message_modal.find('.modal-footer a[data-button-
action=reply]');
reply_button.on('click', function(){
log("CLICKED REPLY.");
});
});
message_modal.modal('show'); //display the message
});
var log = function(msg) {
console.log(msg);
}
the log() function prints..
1st message click:
PREPARE MESSAGE DISPLAY.
CLICKED REPLY.
2nd message click:
PREPARE MESSAGE DISPLAY.
PREPARE MESSAGE DISPLAY.
CLICKED REPLY.
CLICKED REPLY.
CLICKED REPLY.
I tried unbinding the reply buttons' click handler when the
message_modal gets a 'hide' event, but that only reduces the number of
times the event fires by 1.
Any ideas where I'm going wrong? Should I be using unbind() in other
places?
Many thanks for reading.