为什么jQueryAjax在这里发布两次？

当我第一次选择Addnew和Addanew选项时，下面的操作很好。第二次，对于按类区分的不同元素，它会将新选项添加到所选元素和第一个元素。这两个元素都绑定到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>

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

不要嵌套单击事件

这里的问题是，每次触发$'upload\u 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!');
}

正确代码：

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

});

---

谢谢你的回复！我找到了一种让它工作的方法，让点击保持嵌套状态，但解除第二次点击的绑定。我无法得到建议的解决方案，这些方案使所有函数都无法正常工作。当它们没有嵌套时，似乎没有办法让第二次单击起作用。我不知道为什么。在调用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>

---

每次单击upload_form选项[value=addnew]时，都会添加一个新的单击处理程序来添加新的提交。单击第一个按钮5次，现在单击第二个按钮将触发5次@罗伯特：在解雇莫代尔后，我该如何撤销？也就是说，如果点击上传表单选项[value=addnew]，然后点击关闭该模式，则该模式被取消？谢谢您的回答。我试过了，现在我的模式窗口在我输入文本并单击add按钮后没有做任何事情。如何触发模式窗口以接受文本输入而不嵌套两个单击事件？控制台是干净的，因为添加按钮无效。