The event in jquery popup is triggered more than once

Question

I am working on a survey application using Asp.net MVc. My events in jquery popup are triggered more than once. The more a popup is opened, the more it triggers in the event in the popup. What is the reason of this. Every time browsers are opened, the temporary javascript file that starts with the VM is removed. When the popup is closed, these opened virtual javascript files are not destroyed. What is the reason of this?

These events include adding rows to the table, updating and deleting rows.The AddOrEdit.cshtml file contains both screen components and javascript codes.

Images;

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;" 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 add, edit, delete click events

<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

It seems you are binding event multiple time by using class selector. It means After adding new DOM in the document, bind a click event on newly added action buttons, but it is binding click event on existing action buttons also.

So simple tick to solve your problem is you have to unbind existing click event and bind new once.

$(".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

You can use jQuery on/off methods to handle this.

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

});

Answer 3

When you open popup for the second time I believe running $(".add-new").length will return 2 for you. Try to resolve that first which will automatically resolve your events problem.

Do changes such that $(".add-new").length is always 1