为什么jQuery ajax在这里发布两次?

The following works fine the first time I select "Add New" and add a new option. The second time (for a different element distinguished by class) it adds the new option to the selected element and the first one. Both elements are bound to addnew.

当我第一次选择“添加新”并添加新选项时，下面的方法很有效。第二次(对于按类区分的不同元素)将新选项添加到所选元素和第一次元素。两个元素都绑定到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>

The weird thing is that it seems to loop through the ajax a post twice. I suppose it's finding all the "addnew" values (there are 2 so far, there will be more). How do I get it to just treat the element with the designated class? Hope this makes sense.

奇怪的是，它似乎在ajax中循环了两次。我想它会找到所有的“addnew”值(到目前为止有2个，以后还会有更多)。如何让它只处理指定类的元素?希望这是有意义的。

3 个解决方案

#1

Thanks for you responses! I found a way to get it to work by leaving the clicks nested but unbinding the second one. I could not get the suggested solns (which unnest all the functions) to work. There seems to be no way to get the second click to work when they are not nested. I'm not sure why. It's also necessary to have the success and errorHandler functions inside the function calling ajax. Here's the code (identical the question above but with the unbind statement in the second nested click):

谢谢你回复!我找到了一种方法，让单击保持嵌套而不绑定第二个。我无法让建议的solns(将所有功能都去掉)发挥作用。在没有嵌套的情况下，似乎没有办法让第二次单击生效。我不知道为什么。还需要在调用ajax的函数中包含success和errorHandler函数。下面是代码(与上面的问题相同，但在第二个嵌套单击中使用unbind语句):

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

#2

Do not nest the click events.

不要嵌套单击事件。

The problem here is that you will bind click event on $('#add-new-submit') every time you the click event on $('#upload_form option[value="addnew"]') is triggered

这里的问题是，每次触发$('#add-new-submit')上的单击事件('#upload_form选项[value="addnew"])时，您将绑定$上的单击事件

Your script should look like below

您的脚本应该如下所示

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

#3

Correct code :

正确的代码:

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

});