jquery popup中的事件被多次触发

Posted 2023-05-08

【中文标题】jquery popup中的事件被多次触发

【英文标题】：The event in jquery popup is triggered more than once

【发布时间】：2020-05-07 08:43:53

【问题描述】：

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

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

图片；

AddOrEdit.cshtml(Jquery Popup)

@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;"  scope="col">Seçenek Id</th>
        <th scope="col">Option Name</th>
        <th  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");
  

  );
);

【问题讨论】：

请确保您发布的代码是minimal reproducible example。解析 100 多行代码会妨碍人们提供帮助。

@evolutionxbox 你是对的。我已经编辑了我的问题。你能帮我吗？

上面哪一行代码被多次调用>？能否请您具体指出

@NanditaSharma 所有事件都被多次触发。例如，一旦您打开弹出窗口一次，就没有问题。如果您关闭并重新打开，所有事件都会运行 2 次。第三次关闭和打开后，所有事件运行3次。换句话说，浏览器将 AddOrEdit.cshtml 中的 javascript 代码作为像 VM6121 一样的页面打开每个弹出窗口。正如您在图片上看到的那样

我将尝试将其添加到父屏幕中。

【参考方案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
);

【参考方案2】：

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

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

);

【参考方案3】：

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

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