当我尝试删除条目时，jQuery 出现奇怪的循环问题

Question

我已尽力在代码中记录这一点。

当我尝试删除已添加的项目时，出现奇怪的循环问题。

示例：

我添加了 3 个项目：

• 当我尝试删除第一个项目时 列表中的项目...我得到确认 删除对话框 3 次

• 删除第二次 列表中的项目...我得到确认两次。

• 是的...你猜对了..最后一个只给了我一次。

提前致谢。

无论如何，这是带注释的 jQuery 代码（这是一个很大的代码）：

$(document).ready(function() {

  //hides the message/error console
  $("#console").hide();

//this is the add new button functionality  
  $("#save").click(function(){
    var ul = $("ul.addul");
    var addM = $(".mo").val();
    var addY = $(".yr").val();
    var addC = $(".ct").val();
    var addT = $("textarea#addThoughts").val();

    //submit the add
    $.post("save.php", { month : addM, year : addY, cottage : addC, thoughts : addT },
      function(data){

        //all good
        if(data.success) {

          //returns the item's respective id from db
          var returnID = data.id;

          //resets the form after items inserted into db
          document.getElementById('items').reset();

          //this puts the added item into the html
          $(".added").append(//content in here removed to shorten the example);

          //not implemented yet
          $(".edit").click(function(){
            $(this).parent().siblings("li.addit").hide();
            $(this).parent().siblings("li").children("[name=month], [name=year], [name=cottage], [name=thoughts]").show();
            $(this).parent().siblings("li").children(".showDataMonth, .showDataYear, .showDataCottage, .showDataThoughts").hide();
            $(this).siblings(".del").hide();
            $(this).siblings(".cancel, .save").show();
            $(this).hide();
          });

          //this is functioning properly; this cancels an update
          $("button.cancel").click(function(){
            $(this).parent().siblings("li.addit").show();
            $(this).parent().siblings("li").children("[name=month], [name=year], [name=cottage], [name=thoughts]").hide();
            $(this).parent().siblings("li").children(".showDataMonth, .showDataYear, .showDataCottage, .showDataThoughts").show();
            $(this).siblings(".edit, .del").show();
            $(this).siblings(".save").hide();
            $(this).hide();
          });

          //resetting of values to prepare another entry
          $(".save, .cancel, .month, .year, .cottage, .thoughts").hide();
          $(".showDataThoughts").css({ width : "160px;"});
          $(".mo, .yr, .ct").val("0");

          //shows successful insert of data into db
          $("#console").html(data.message).css({background: "green", color: "white"}).fadeIn().animate({ opacity : "+=0" }, 2000).fadeOut();

          //this is the delete function that I am referring to.
          //I get the "confirm" dialog just fine.
          //say I have 3 entries:
          //if I try to delete the first entry...I get the confirm delete dialog 3 times.
          //if I try to delete the second entry...I get the confirm delete dialog 2 times.
          //and the 3rd entry...I only get it once.
          //I'm stuck in a weird kinda loop.
          $(".del").click(function(){
              var del = this;
              var thisVal = $(del).val();
              $.post("delete.php", { dirID : thisVal },
              function(data){
                if(confirm("Are you sure you want to DELETE this entry?") == true) {
                  if(data.success) {
                    alert(thisVal);
                  }
                }
              return false;
              }, "json");
          });

        } else if(data.error) { //item could not be added
          $("#console").html(data.message).css({background: "red", color: "white"}).fadeIn().animate({ opacity : "+=0" }, 2000).fadeOut();
        }
    }, "json");
    return false;
}); //end of add button

//this populates the select boxes
$.getJSON('dates_in_residence.php', function(data){
    var htmlMonth = '';
    var htmlYear = '';
    var htmlCottage = '';
    var len = data.length;
    for (var i = 0; i < 12; i++) {htmlMonth += '<option class="optionMonth" value="' + data[i].month + '">' + data[i].month + '</option>';
    }
    $('select#addMonth').append(htmlMonth);
    for (var i = 12; i < 34; i++) {htmlYear += '<option class="optionYear" value="' + data[i].year + '">' + data[i].year + '</option>';
    }
    $('select#addYear').append(htmlYear);
    for (var i = 35; i < 42; i++) {htmlCottage += '<option class="optionCottage" value="' + data[i].cottage + '">' + data[i].cottage + '</option>';
    }
    $('select#addCottage').append(htmlCottage);
});

//this adds select menu's value to hidden inputs
$("#addMonth").change(function () {
          var str = '';
          $("#addMonth option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $(".mo").val(str);
        }).change();
$("#addYear").change(function () {
          var str = "";
          $("#addYear option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $(".yr").val(str);
        }).change();
$("#addCottage").change(function () {
          var str = "";
          $("#addCottage option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $(".ct").val(str);
        }).change();
});

以及 delete.php 文件：

<?php

if($_POST) {

  $data['delID'] = $_POST['dirID'];

  $query = "DELETE from //tablename WHERE dirID = '{$data['delID']}' LIMIT 1";

  $result = $db->query($query);

  if($result) {
    $data['success'] = true;
    $data['message'] = "This entry was successfully removed.";
  }

  echo json_encode($data);
}

?>

Answer 1

我想你想看看 jQuery 1.3 中的 live 函数，它自动绑定事件到新创建的元素。您需要将其完全移出帖子部分，以便它在第一页加载时运行。像这样的东西应该有效：

$(".del").live("click", function(){
  //event code here
});

Answer 2

该行：

$(".del").click(function(){

返回具有 del 类的所有元素，这意味着每次添加新项目时，都会向每个现有 del 元素添加一个新事件。 （浏览一下代码的其余部分，这显然对于大多数元素来说都是一个问题）。

最好的选择是单独组装构成每个新项目的元素，并在将它们附加到内容之前为其分配特定事件。这样您就知道每个特定元素都会有一个与其关联的正确元素。

编辑：

将数据传递给新函数：

  $("#save").click(function(){
    var ul = $("ul.addul");
    var addM = $(".mo").val();
    var addY = $(".yr").val();
    var addC = $(".ct").val();
    var addT = $("textarea#addThoughts").val();

    //submit the add
    $.post("save.php", { month : addM, year : addY, cottage : addC, thoughts : addT },
      function(data){

        //all good
          if(data.success) {
            run_success(data);
          }
       }//close function
   }//close #save click

   //new, global function
   function run_success(data) {
       //do things with data here
   }

设置全局变量：

  $("#save").click(function(){
    var ul = $("ul.addul");
    var addM = $(".mo").val();
    var addY = $(".yr").val();
    var addC = $(".ct").val();
    var addT = $("textarea#addThoughts").val();

    //submit the add
    $.post("save.php", { month : addM, year : addY, cottage : addC, thoughts : addT },
      function(data){

        //all good
          if(data.success) {
            my_global_var = data; //note, my_global_var is created without a var
                                  //before it, thereby assigning it a global scope
          }
       }//close function
   }//close #save click