爲什麼jQuery ajax在這裏發佈兩次？

Question

下面的工作我第一次選擇「添加新」並添加一個新的選項罰款。第二次（對於按類別區分的不同元素），它將新選項添加​​到所選元素和第一個元素。這兩個元素都必須重新添加。

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

奇怪的是，它似乎通過ajax一個帖子兩次循環。我想它是找到所有「addnew」值（到目前爲止有2個，會有更多）。我如何才能將它用於指定類的元素？希望這是有道理的。

Answer 1

感謝您的回覆！我發現了一種通過讓點擊嵌套但解除第二個點擊來實現它的工作方式。我無法得到建議的解決方案（其中所有功能都是無法解決的）。當它們沒有嵌套時，似乎無法讓第二次點擊起作用。我不知道爲什麼。在調用ajax的函數內部還需要成功和errorHandler函數。下面的代碼（相同以上，但在第二嵌套點擊取消綁定聲明的問題）：

<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

請勿嵌套單擊事件。

這裏的問題是，你將click事件上$('#add-new-submit')每次上$('#upload_form option[value="addnew"]')單擊事件被觸發

你的腳本應該看起來像時綁定下面

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

正確的代碼：

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

});