Perché jQuery ajax pubblica due volte qui?

Question

Quanto segue funziona bene la prima volta che seleziono "Aggiungi nuovo" e aggiungo una nuova opzione. La seconda volta (per un elemento diverso distinto dalla classe) aggiunge la nuova opzione all'elemento selezionato e al primo. Entrambi gli elementi sono tenuti ad aggiungere di nuovo.

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

La cosa strana è che sembra passare attraverso l'ajax un post due volte. Suppongo che stia trovando tutti i valori "addnew" (ce ne sono 2 finora, ce ne saranno altri). Come faccio a trattare solo l'elemento con la classe designata? Spero che questo abbia un senso.

Answer 1

Grazie per le vostre risposte! Ho trovato un modo per farlo funzionare lasciando i clic nidificati ma slegando il secondo. Non sono riuscito a ottenere le soln suggerite (che non hanno tutte le funzioni) per funzionare. Non sembra esserci alcun modo per far funzionare il secondo clic quando non sono nidificati. Non sono sicuro del perché. È inoltre necessario avere le funzioni di successo e errorHandler all'interno della funzione che chiama ajax. Ecco il codice (identica alla domanda di cui sopra, ma con l'affermazione unbind nella seconda nidificato 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

Non annidare gli eventi di clic.

Il problema qui è che si legano evento click su $('#add-new-submit') ogni volta che l'evento click su $('#upload_form option[value="addnew"]') è innescato

Lo script dovrebbe essere simile di seguito

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

codice corretto:

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

});