AJAX jQuery click results in function event being fired twice

Question

I have an AJAX chat room module in Drupal and I am trying to insert BBCode stlye tex tags to the submit box when the user clicks Insert Tex. I managed to get the following code to work the first time but afterwards when I click Insert Tex it inserts the tex tags triple times.

$('#edit-chatroom-message-entry-submit').click(function (e) {
  e.preventDefault();
  e.stopPropagation();
  if ($('#edit-chatroom-message-entry-box').val()){
    Drupal.chatroom.postMessage($('#edit-chatroom-message-entry-box').val());
    $('#edit-chatroom-message-entry-box').val('').focus();
  }
});

$('#edit-chatroom-tex-submit').click(function (e) {
  e.preventDefault();
  e.stopPropagation();
  $('#edit-chatroom-message-entry-box').val($('#edit-chatroom-message-entry-box').val() + '[tex][/tex]');
});

I would appreciate it if a suggestion could be make to make the code work properly.

Answer 1

If I correctly understand your code you need this:

var chatbox = $('#edit-chatroom-message-entry-box');
var value = chatbox.val();

if (value.indexOf('[tex][/tex]') == -1) {
    chatbox.val(value + '[tex][/tex]');
}

Answer 2

Thank you for your help Ivo. I was able to get the tex tags inserted by installing the jquery plugin markItUp. I had to add a special button for tex but it works fine now. The Drupal Wysiwyg modules and standalone TinyMCE and fckeditor were not working because of the jquery ajax, but since markItUp is itself jquery I guess there were no more conflicts.