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.

Reply via email to