Dlaczego jQuery ajax publikuje dwa razy tutaj?

Question

Następujące działa poprawnie po pierwszym wybraniu opcji "Dodaj nowy" i dodaniu nowej opcji. Drugi raz (dla innego elementu rozróżnianego przez klasę) dodaje nową opcję do wybranego elementu i pierwszego. Oba elementy są zobowiązane do dodania.

<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> 

Dziwne jest to, że wydaje się, że dwa razy przeplata się przez ajax. Przypuszczam, że znajduje on wszystkie wartości "addnew" (do tej pory są ich 2, będzie ich więcej). Jak uzyskać to, aby po prostu traktować element z wyznaczoną klasą? Mam nadzieję, że to ma sens.

Answer 1

Dzięki za odpowiedzi! Znalazłem sposób, aby uruchomić go, pozostawiając kliknięcia zagnieżdżone, ale rozwiązując drugi. Nie mogłem zasugerować, żeby sugerowane solnele (które nie spełniają wszystkich funkcji) działały. Wydaje się, że nie ma sposobu, aby uruchomić drugie kliknięcie, gdy nie są zagnieżdżone. Nie jestem pewien dlaczego. Konieczne jest również, aby funkcje success i errorHandler funkcjonowały wewnątrz funkcji wywołującej ajax. Oto kod (identyczne pytanie powyżej, ale z Unbind oświadczenia w drugiej zagnieżdżonej kliknięcia):

<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

Nie zagnieżdżaj zdarzeń kliknięcia.

Problemem jest to, że można powiązać zdarzenie click na $('#add-new-submit') każdym razem, gdy zdarzenie click na $('#upload_form option[value="addnew"]') jest wyzwalany

skryptu powinien wyglądać jak poniżej

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 3

Prawidłowy kod:

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

});