How to avoid multiplication on .live jquery

Question

I have an event what on select adds to my bootstrap html editor the right text value. The problem is that each time there is a select the html toolbar is getting added so I have a lot toolbar up there. I would like to destroy before creation, but I don't really know how. The code look as it follows

$('a.open_dialog').click(function(e) {
        e.preventDefault();
        var tabsDiv=$('<div />').appendTo('body').load($(this).attr('href'),function(){
        $('#tabs').tabs();
        $('select#state').live('change',function() {

            $('.textarea').empty().wysihtml5().data("wysihtml5").editor.setValue(getCustomText($('select#state').val()));

        });

        $( "#datepicker" ).datepicker();        
        })
        .dialog({

            title: $(this).attr('title'),
            modal: true,
            draggable: false,
            width: 800,
            position: 'top',
            buttons: {
                "Speichern": function() {
                    open: { $(this).addClass('b') }
                    $.ajax({
                           type: "POST",
                           url: 'action.php',
                           data: $("#edit_form").serialize(), // serializes the form's elements.
                           success: function(data)
                           {
                               alert('Der Datensatz wurde gespeichert!'); // show response from the php script.
                           },
                            error:function(){

                               alert('Es gibt ein Fehler bei Daten übetragung!');

                            }
                         });

                },
                "Email schicken": function() {

                    $.ajax({
                           type: "POST",
                           url: 'mailer.php',
                           data: $("#contactform").serialize(), // serializes the form's elements.
                           success: function(data)
                           {
                               alert('Das Email wurde geschickt!'); // show response from the php script.
                           },
                           error:function(){

                               alert('Es gibt ein Fehler bei Daten übetragung!');

                            }
                         });
                },

                "Rechnung herunterladen":function() {

                    $.ajax({
                           type: "POST",
                           url: 'docsx.php',
                           data: $("#edit_form").serialize(), // serializes the form's elements.
                           success: function(data)
                           {

                               window.location.href ='rechnung.docx'; // show response from the php script.
                           },
                           error:function(){

                               alert('Es gibt ein Fehler bei Daten übetragung!');

                            }
                         });

                    }

            },
            close: function() {
                tabsDiv.remove() // so I can reload again
                location.reload(true);
//              allFields.val( "" ).removeClass( "ui-state-error" );


            },
        });


        return false;
    }); 

Answer 1

Try this

Look in the documentation whether there is a destroy method to remove the toolbar.. You can also take one more approach where in you remove the contents completely and add the content again and reassign the toolbar..

UPDATED

Why do you have the change event nested inside the click event.. If you do that then every time the dialog is opened a new change event is associated with it.. Try moving it out of the click event.. Also make sure you delegate the events by using .on()

Try unbinding and assigning the event.. We are not supposed to unbind and bind over and over as it is an antipattern .. But check if this works

$('select#state').unbind().live('change', function() {
          $('.textarea').empty().wysihtml5().data("wysihtml5").editor
            .setValue(getCustomText($('select#state').val()));
        });