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