Tengo una ventana modal que aparece cuando se selecciona "Agregar nuevo" en el menú desplegable. El usuario puede escribir en un campo de texto una nueva opción que se agregará al menú desplegable. Funciona bien siempre que el texto se ingrese cada vez que ingrese a cada uno de los nuevos campos (gracias a la ayuda de esta increíble comunidad¿Por qué jQuery ajax publica dos veces aquí? :-) Ahora mi problema es que si el usuario descarta el modal haciendo clic fuera de él y luego selecciona otro "Agregar nuevo" e intenta ingresar texto, cuando se hace clic en el botón Agregar, hay un montón de acciones extrañas, como en la pregunta anteriormente vinculada anteriormente. Claramente hay que hacer algo de desvinculación, pero no puedo resolverlo. Idealmente, el usuario debería poder abrir y cerrar cualquier cantidad de ventanas modales y aún así poder ingresar datos. ¿Algunas ideas?

Aquí está la jQuery:

  <script type="text/javascript">

        var Classofentry = '';

        $('#upload_form option[value="addnew"]').click(function(){

              // Show modal window
              $('#add-new').modal('show');

              // Get the class
              //var Classofentry = $('#upload_form option[class]').attr("class");
              var Classofentry = $(this).attr("class");
              //console.log(Classofentry);


              $('#add-new-submit').on('click', function(){                

                  // Get new option from text field
                  var value = $('#add-new-text').val();
                  //console.log(value);

                  $.ajax({
                        type: "POST",
                        url: "<?php echo site_url(); ?>main/change_options",
                        data: {new_option: value, new_option_class: Classofentry},
                        dataType: "html",
                        error: errorHandler,
                        success: success
                      });

                  function success(data)
                  {

                      $('#'+Classofentry).append("<option value='" + data + "'selected=\"selected\">" + data + "</option>"); 
                      //alert(data);

                      //alert('Success!');

                  }

                  function errorHandler()
                  {
                      alert('Error with AJAX!');
                  } 

                  $('#add-new-submit').unbind('click'); // This fixes the problem for multiple entries
                  //$('#add-new-text').unbind('click');
                  //$('#upload_form option[value="addnew"]').unbind('click')
                  $('#add-new').modal('toggle');                      

              });

              //$('#add-new-submit').unbind('click');

              //$('#upload_form option[value="addnew"]').unbind('click');
        });


  </script>

Aquí está el modal:

  <!-- add-new field -->
  <div class="modal small hide fade" id="add-new" tabindex="-1" role="dialog" aria-labelledby="add-new-fieldLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="add-new-fieldLabel">Add New Field</h3>
      </div>
      <div class="modal-body">

          <p>Would you like to add a new item?</p>
          <input type="text" id="add-new-text" name="add-new-text" placeholder="Type the new option">

      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-success" id="add-new-submit" name="add-new-submit"/>Add</button>
      </div>
 </div><!-- /add-new field -->