jquery popup 中的事件被多次触发

Question

我正在使用 Asp.net MVc 开发调查应用程序。 我在 jquery 弹出窗口中的事件不止一次被触发。 弹窗打开的次数越多，弹窗中的事件触发的越多。 这是什么原因。 每次打开浏览器时，以 VM 开头的临时 javascript 文件都会被删除。 当弹出窗口关闭时，这些打开的虚拟 javascript 文件不会被破坏。 这是什么原因？

这些事件包括向表中添加行、更新和删除行。AddOrEdit.cshtml 文件包含屏幕组件和 javascript 代码。

图片;

AddOrEdit.cshtml（Jquery 弹出窗口）

@using MerinosSurvey.Models
@model Questions
@{
 Layout = null;
}

@using (Html.BeginForm("AddOrEdit", "Question", FormMethod.Post, new { onsubmit = "return SubmitForm(this)", onreset = "return ResetForm(this)", id = "questionForm" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })

<div class="form-group row">
@Html.Label("QuestionId", "Soru No", new { @class = "col-form-label col-md-3" })
<div class="col-md-9">
@Html.TextBoxFor(model => model.QuestionId, new { @readonly = "readonly", @class = "form-control", })

</div>
</div>
<div class="form-group row">
@Html.Label("QuestionName", "Soru Adı", new { @class = "col-form-label col-md-3" })
<div class="col-md-9">
@Html.EditorFor(model => model.QuestionName, new { htmlAttributes = new { @class = "form-control" 
} })
@Html.ValidationMessageFor(model => model.QuestionName)
</div>
</div>
<div class="form-group row">
<div class="col-md-9 offset-md-3">
<div class="custom-control custom-checkbox">
    @Html.CheckBoxFor(m => m.IsOtherOptionRequired, new { @class = "custom-control-input ", id = "IsOtherOptionRequired", })
    <label class="custom-control-label" for="IsOtherOptionRequired">Diğer Seçeneği Eklensin mi? 
</label>
 </div>
</div>
</div>
<br>
<hr class="style14">
<br>
@Html.ValidationMessageFor(model => model.Options)
<div class="table-wrapper form-group table-responsive-md">
<div class="table-title">
<div class="form-group row">
    <div class="col-md-9">Options</div>
    <div class="col-md-3">
        <button type="button" class="btn btn-success add-new" style="margin-bottom: 10px"><i class="fa fa-plus"></i>Add Option</button>
    </div>
</div>
</div>
<table class="table optionTable">
<thead class="thead-light">
    <tr>
        <th style="display:none;" width="20%" scope="col">Seçenek Id</th>
        <th scope="col">Option Name</th>
        <th width="25%" scope="col">Update/Delete</th>
    </tr>

 </thead>
 <tbody>
    @foreach (Options options in Model.Options)
    {
        <tr>
            <td style="display:none;">@options.OptionId</td>
            <td>@options.OptionName</td>
            <td>
                <a class="add btn btn-primary btn-sm" title="Add" data-toggle="tooltip">
                    <i class="fa fa-check">Approve</i>
                </a>
                <a class="edit btn btn-secondary btn-sm" title="Edit" data-toggle="tooltip">
                    <i class="fa fa-pencil">Update</i>
                </a>
                <a class="delete btn-danger btn-sm" title="Delete" data-toggle="tooltip">
                    <i class="fa fa-trash">Delete</i>
                </a>
            </td>
        </tr>
    }
 </tbody>
 </table>
 </div>

 <div class="form-group row d-flex justify-content-end">
 <button type="submit" class="btn btn-primary" style="margin-bottom: 10px; color: black"><i class="fa fa-save"></i>Kaydet</button> </div>
}

jquery 添加、编辑、删除点击事件

<script>
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
//var actions = $("table.optionTable td:last-child").html();

var actions =
' <a class="add btn btn-primary btn-sm" title="Add" data-toggle="tooltip"><i class="fa fa-check">Onayla</i></a>' +
    '<a class="edit btn btn-secondary btn-sm" title="Edit" data-toggle="tooltip"><i class="fa fa-pencil">Güncelle</i></a>' +
    '<a class="delete btn-danger btn-sm" title="Delete" data-toggle="tooltip"><i class="fa fa-trash">Sil</i></a>';

  // Append table with add row form on add new button click
 $(".add-new").click(function () { //RUNS MULTIPLE TIMES ON CHROME
   debugger;
   $(this).attr("disabled", "disabled");
   $(".btnSubmit").attr("disabled", "disabled");
   var index = $("table.optionTable tbody tr:last-child").index();
   var row = '<tr>' +
    '<td style="display:none;">0</td>' +
    '<td><input type="text" class="form-control" name="optionName" id="optionName"></td>' +
    '<td>' +
    actions +
    '</td>' +
    '</tr>';
  $("table.optionTable").append(row);
  $("table.optionTable tbody tr").eq(index + 1).find(".add, .edit").toggle();
  $('[data-toggle="tooltip"]').tooltip();
});


 // Add row on add button click
 $(".add").click(function () { //RUNS MULTIPLE TIMES ON CHROME
   debugger;
   var empty = false;
   var input = $(this).parents("tr").find('input[type="text"]');
   input.each(function () {
    if (!$(this).val().trim()) {
        $(this).addClass("error");
        empty = true;
    } else {
        $(this).removeClass("error");
    }
});
  $(this).parents("tr").find(".error").first().focus();
  if (!empty) {
    input.each(function () {
        $(this).parent("td").html($(this).val().trim());
    });
    $(this).parents("tr").find(".add, .edit").toggle();
    $(".add-new").removeAttr("disabled");
    $(".btnSubmit").removeAttr("disabled");

  }
});

// Edit row on edit button click
$(".edit").click(function () { //RUNS MULTIPLE TIMES ON CHROME
  debugger;
  /*td: nth - child(2)*/
  //$(this).parents("tr").find("td:nth-child(2)").each(function () {
  $(this).parents("tr").find("td:not(:first-child, :last-child)").each(function () {
    $(this).html('<input type="text" class="form-control" value="' + $(this).text() + '">');
});
  $(this).parents("tr").find(".add, .edit").toggle();
  $(".add-new").attr("disabled", "disabled");
  $(".btnSubmit").attr("disabled", "disabled");
});


// Delete row on delete button click
$(".delete").click(function () {//RUNS MULTIPLE TIMES ON CHROME
  debugger;
  $(this).parents("tr").remove();
  $(".add-new").removeAttr("disabled");

  var rowCount = $('table.optionTable tbody tr').length;
  if (rowCount > 0) {
      $(".btnSubmit").removeAttr("disabled");
  } else {
      $(".btnSubmit").attr("disabled", "disabled");
  }

  });
});

Answer 1

看来您正在使用类选择器多次绑定事件。 这意味着在文档中添加新的 DOM 后，在新添加的操作按钮上绑定点击事件，但它也会在现有操作按钮上绑定点击事件。

如此简单的勾选来解决你的问题是你必须取消绑定现有的点击事件并绑定一次新的。

$(".add-new").unbind('click').bind('click', function(){
    //your code here
});
$(".add").unbind('click').bind('click', function(){
    //your code here
});
$(".edit").unbind('click').bind('click', function(){
    //your code here
});
$(".delete").unbind('click').bind('click', function(){
    //your code here
});

Answer 2

您可以使用 jQuery开/关方法来处理这个问题。

$(".add-new").off('click').on('click', function(){

});

Answer 3

当您第二次打开弹出窗口时，我相信运行 $(".add-new").length 将为您返回 2 。 尝试首先解决该问题，这将自动解决您的事件问题。

进行更改，使 $(".add-new").length 始终为 1