なぜjQuery ajaxはここに2回投稿しますか？

Question

初めて「Add New」を選択して新しいオプションを追加すると、次のように動作します。 2回目（クラスによって区別される別の要素の場合）、選択された要素と最初の要素に新しいオプションが追加されます。両方の要素は新たに追加されます。

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

奇妙なことは、アヤックスを2回繰り返しているようです。私はそれがすべての "addnew"の値を見つけていると思います（2つはこれまでのところあります、それ以上はあります）。指定されたクラスで要素を処理するにはどうすればよいですか？これが理にかなってほしい。

Answer 1

お返事ありがとうございます！私はクリックをネストしたままにしておくが、2番目のものはバインドしないようにする方法を見つけた。私は、提案された解決策（すべての機能を無効にする）を働かせることができませんでした。 2番目のクリックが入れ子になっていないときに動作させる方法はないようです。なぜ私は分からない。また、ajaxを呼び出す関数の中にsuccessとerrorHandler関数を持たせることも必要です。ここでは、コード（同じ質問以上が、第2ネストされたクリックでアンバインド文を使用して）です：

<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

クリックイベントをネストしないでください。

ここでの問題あなたは$('#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'); 

});