jQuery AJAX पोस्ट दो बार क्यों करता है?

Question

पहली बार ठीक है जब मैं "नया जोड़ें" चुनता हूं और एक नया विकल्प जोड़ता हूं। दूसरी बार (वर्ग द्वारा प्रतिष्ठित एक अलग तत्व के लिए) यह चयनित तत्व और पहला वाला नया विकल्प जोड़ता है। दोनों तत्व 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> 

अजीब बात यह है कि यह अजाक्स के माध्यम से दो बार पोस्ट लूप लगता है। मुझे लगता है कि यह सभी "addnew" मानों को ढूंढ रहा है (अब तक 2 हैं, और भी होगा)। मैं इसे निर्दिष्ट कक्षा के साथ तत्व का इलाज करने के लिए कैसे प्राप्त करूं? उम्मीद है कि यह समझ में आता है।

Answer 1

आपके प्रतिक्रिया के लिए धन्यवाद! मुझे नेस्टेड क्लिक छोड़कर काम करने के लिए एक रास्ता मिला लेकिन दूसरे को अनबाइंड करना। मुझे काम करने के लिए सुझाए गए सोलन (जो सभी कार्यों को अनदेखा करते हैं) नहीं मिल सका। ऐसा लगता है कि दूसरे क्लिक पर काम करने के लिए कोई रास्ता नहीं है जब वे घोंसला नहीं हैं। मुझे यकीन नहीं है क्यों। सफलता और त्रुटि होना जरूरी है। फ़ंक्शन के अंदर हैंडलर फ़ंक्शन AJAX को कॉल करते हैं। यहाँ कोड (ऊपर लेकिन दूसरे नेस्टेड क्लिक में अनबाइंड बयान के साथ समान प्रश्न) है:

<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

क्लिक ईवेंट पर घोंसला न करें।

समस्या यहाँ है कि आप हर बार जब आप $('#upload_form option[value="addnew"]') पर क्लिक करें घटना

आपकी स्क्रिप्ट की तरह दिखना चाहिए शुरू हो रहा है $('#add-new-submit') पर क्लिक करें घटना के लिए बाध्य होगा नीचे

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

});