Why does jQuery ajax post twice here?

Question

The following works fine the first time I select \"Add New\" and add a new option. The second time (for a different element distinguished by class) it adds the new option t

Answer 1

Do not nest the click events.

The problem here is that you will bind click event on $('#add-new-submit') every time you the click event on $('#upload_form option[value="addnew"]') is triggered

Your script should look like below

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

    // Show modal window
    $('#add-new').modal('show');
    // Get the class
    Classofentry = $(this).attr("class");
});

$('#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
    });
    $('#add-new').modal('toggle');

});

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

    //alert('Success!');
}

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

Answer 2

Thanks for you responses! I found a way to get it to work by leaving the clicks nested but unbinding the second one. I could not get the suggested solns (which unnest all the functions) to work. There seems to be no way to get the second click to work when they are not nested. I'm not sure why. It's also necessary to have the success and errorHandler functions inside the function calling ajax. Here's the code (identical the question above but with the unbind statement in the second nested click):

  <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 = $(this).attr("class");
          console.log(Classofentry);Thanks            

        $('#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
              });

          $('#add-new-submit').unbind('click') // <-------------- The answer!!!!!
          $('#add-new').modal('toggle');


          function success(data)
          {

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

              //alert('Success!');

          }

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

  </script>

Answer 3

Correct code :

var Classofentry = '';
$('#upload_form option[value="addnew"]').click(function(){
// Show modal window
$('#add-new').modal('show');
    Classofentry = $(this).attr("class"); // Get the class
});           



$('#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').modal('toggle');

});