function in html table row click always repeating-CodePudding

I want to make a select one row or select multi rows in a html table, switching function with radio button.

But when I switch on one and multiple it keeps in memory the older function called.

I tried a lot of test but nothing was successful.

function alertStatus() {

  if ($("#el").is(":checked")) {
    alert("Is checked!");

    $("table tbody tr").click(function() {
      console.log("hey");

      $("table tbody tr").removeClass('highlight');
      $(this).addClass('highlight');

    });
  }

  if ($("#el2").is(":checked")) {
    alert("Is not checked :( ");

    $("table tbody tr").click(function() {
      console.log("hey2");

      $(this).addClass('highlight');
    });
  }
}
// Attaching the click event on the button
$(document).on("click", "#el", alertStatus);
$(document).on("click", "#el2", alertStatus);

table {
  border: 1px solid black;
  border-collapse: collapse;
}

tr:hover {
  background-color: #0000FF;
  color: white;
  cursor: pointer;
}

tr {
  border: 1px solid #0aa9e9;
  color: black;
}

.highlight {
  background-color: #0000FF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<h2>A basic HTML table</h2>
<label>
  <input type="radio" name="option" id="el" /> Single Connected 
</label>
<br>
<label>
  <input type="radio" name="option" id="el2" /> Multiple connected
</label>

<table style="width:100%">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

CodePudding user response：

Never add event listeners on other events.

Test the radios in the event handler

$(function() {
  const $rows = $("table tbody tr").on("click",function() {
    if ($("#el").is(":checked")) {
      console.log("hey");
      $rows.removeClass('highlight');
      $(this).addClass('highlight');
    } else if ($("#el2").is(":checked")) {
      console.log("hey2");
      $(this).addClass('highlight');
    }
  })
})

table {
  border: 1px solid black;
  border-collapse: collapse;
}

tr:hover {
  background-color: #0000FF;
  color: white;
  cursor: pointer;
}

tr {
  border: 1px solid #0aa9e9;
  color: black;
}

.highlight {
  background-color: #0000FF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<h2>A basic HTML table</h2>
<label>
  <input type="radio" name="option" id="el" /> Single Connected 
</label>
<br>
<label>
  <input type="radio" name="option" id="el2" /> Multiple connected
</label>

<table style="width:100%">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>