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 to the selected element and the first one. Both elements are bound to addnew.

  <script type="text/javascript">

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

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

          // Get the class

          var 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
                  });

              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');

           });
      }); 

  </script>

The weird thing is that it seems to loop through the ajax a post twice. I suppose it's finding all the "addnew" values (there are 2 so far, there will be more). How do I get it to just treat the element with the designated class? Hope this makes sense.

Answer 1

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 2

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!');
}