.one() jQuery function is raised multiple times automatically

Question

I have two tables:

First table saves users' answers and then let the user choose the cells from the table. Second table reflects the cells that were choosed in the first table.

First table:

<table id="first_table">
  <tr>
      @foreach (var item in ViewBag.parameters)  //for example ViewBag.parameters has 3 items
      {
          <th>@item</th>
      }
  </tr>
</table>

For this table I add the cells("td") dynamically. Each cell has an input box for users' answers.

Second table:

<table id="second_table">
      @foreach (var item in ViewBag.parameters)
      {
          <tr><th>@item :</th></tr>
      }
</table>

Then I have a button that chooses the cells from the first table and adds them to the second table. Additionally it refreshes the second table and let the user choose the cells again from the first table:

$("#clear_Button").click(function (e) {
        alert("click from clear_button");

        $("#second_table td").each(function (e) {
            $(this).remove();
        }); //remove all the cells from the second table

        e.stopPropagation();

        $("#first_table td").css("border", "1px solid black");

        $("#first_table td").one('click', function (evt) {
            alert("click from .one()");
            $(this).css("border", "3px solid yellow"); //mark the clicked cell
            var id_col = $(this).parent().children().index($(this)); //index for the second table where to append the cell
            $("#second_table tr:eq(" + id_col + ")").append("<td>" +  $(this).children().val() + "</td>");
         });
    });

Sometimes the .one() function is raised multiple times when I clicked it once, and as a result I get duplicates added to the second table. I could not find the pattern why it does such a thing. Could you please suggest me?

Answer 1

My changes:

• changed .one to .bind
• added .unbind in the one-function to unbind the event-listener for the clicked cell
• added .unbind at the start of the click-function, to remove any old event-listeners

JavaScript

$("#clear_Button").click(function (e) {
    $("#first_table td").unbind(); //remove all existing event-listeners for all cells

    $("#second_table td").each(function (e) {
        $(this).remove(); //remove all the cells from the second table
    });
    e.stopPropagation();
    $("#first_table td").css("border", "1px solid black");

    $("#first_table td").bind('click', function (evt) {
        $(this).unbind(); //remove the event-listener for the clicked cell
        $(this).css("border", "3px solid yellow"); //mark the clicked cell
        var id_col = $(this).parent().children().index($(this)); //index for the second table where to append the cell
        $("#second_table tr:eq(" + id_col + ")").append("<td>" +  $(this).children().val() + "</td>");
    });
});