Home / Questions / 317077
Accepted
raintrooper
Asked: 2020-12-19 08:53:41 +0800 CST 2020-12-19 08:53:41 +0800 CST

Event when clicking on a table cell

  • 772

I am trying to generate two events when clicking different cells within a GridView. The problem is that if I execute the event in the first cell, event 1 is fired, instead if I execute the event in cell 2, event 1 and event 2 are fired.

I tried to replicate the problem in the following code.

$("table[id*='GrdDatos'] a[id*=GetId]").click(function(e) {
e.preventDefault();
  if ($(e.currentTarget).is('a[id*=GetId]')) {
    alert(1);
  }
  e.stopPropagation();
  return false;
});
$("table[id*='GrdDatos'] a[id*=GetIdOtEliminar]").click(function(e) {
e.preventDefault();
  if ($(e.currentTarget).is('a[id*=GetIdOtEliminar]')) {
    alert(2);
  }
  e.stopPropagation();
  return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table style="width:100%" id="GrdDatos">
  <tr>
    <th>Evento 1</th>
    <th>Lastname</th>
    <th>Evento 2</th>
  </tr>
    <tr>
    <td><a id="GetId" style="cursor:pointer">Clic aquí 1</a></td>
    <td>Jackson</td>
    <td><a id="GetIdOtEliminar" style="cursor:pointer">Clic aquí 2</a></td>
  </tr>
</table>

Thank you very much for your help.

javascript

1 Answers

  1. Best Answer

    You're using the selector a[id*=GetId], which means "elements athat have a id beginning with GetId .

    If you remove the asterisk, look for exactly the value to be GetId:

    $("table[id*='GrdDatos'] a[id*=GetId]").click(function(e) {
e.preventDefault();
  if ($(e.currentTarget).is('a[id=GetId]')) {
    alert(1);
  }
  e.stopPropagation();
  return false;
});
$("table[id='GrdDatos'] a[id=GetIdOtEliminar]").click(function(e) {
e.preventDefault();
  if ($(e.currentTarget).is('a[id=GetIdOtEliminar]')) {
    alert(2);
  }
  e.stopPropagation();
  return false;
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table style="width:100%" id="GrdDatos">
  <tr>
    <th>Evento 1</th>
    <th>Lastname</th>
    <th>Evento 2</th>
  </tr>
    <tr>
    <td><a id="GetId" style="cursor:pointer">Clic aquí 1</a></td>
    <td>Jackson</td>
    <td><a id="GetIdOtEliminar" style="cursor:pointer">Clic aquí 2</a></td>
  </tr>
</table>

    • 2