Deleting events in jquery to dynamic elements

Question

Deleting events in jquery to dynamic elements

Navigation

#1 by (2 votes)
#2 by (2 votes)

1

Hello, I have the following problem. I searched a lot, here and in google and I can not find the problem.

I have a table that is updated dynamically: PHP + Mysql + Jquery

The table that is initially loaded looks like this:

<table class="table table-striped table-bordered table-hover">
<tbody>
    <tr>
        <td><i class="fa fa-envelope fa-1x" title="Cerrada"></i> RA 02-16 </td>
        <td>15-087B-16-1</td>
        <td>950,00</td>
        <td style="text-align: right">118385,50</td>
        <td style="text-align: right">118385,57</td>
        <td style="text-align: center"><a href="#viewC" data-value="4" data-toggle="modal" class="link-view-c"><i class="fa fa-eye link-view-c-child" data-value="4" aria-hidden="true"></i></a></td>
    </tr>
    <tr>
        <td><i class="fa fa-envelope fa-1x" title="Cerrada"></i> RA 17-17</td>
        <td>15-087B-17-2</td>
        <td>142,00</td>
        <td style="text-align: right">11112,12</td>
        <td style="text-align: right">11112,12</td>
        <td style="text-align: center"><a href="#viewC" data-value="14" data-toggle="modal" class="link-view-c"><i class="fa fa-eye link-view-c-child" data-value="14" aria-hidden="true"></i></a></td>
    </tr>
</tbody>

I have the following to capture the ID that I define in the data-value field in the link in the last column.

<script>
$(document).ready(function () {
    $(".link-view-c").on('click', '.link-view-c-child', function () {
        v = $(this).data('value');
        alert(v);
    });        
});

The problem is that when the table is initialized, it loads the first block, I get the ID, but when I go to the next block it does not do anything. And I use

on('evento', 'destino', function())

class link-view-c-child from the second block is supposed to trigger the event.

Any help that unlocks this to me please.

Sldos

jquery php eventos

asked by a.xcibo 03.05.2018 в 16:58

source

2 answers

2

1) As Yo Albert says, in this case it is better to ask the DOM to look for the elements, than to fix it in a defined selector.

2) If you do not move much code, try to put the events and classes on the TD not on those inside.

3) If within the TD there are elements that you need as a <a> you can use $(this).find('a').text() for example

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

$(function(){
  
   $(document).on('click', '.link-view-c', function () {
        v = $(this).data('value');
        alert(v);
    }); 
})

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered table-hover">
<tbody>
<thead>
  <tr>
    <th>Head</th>
    <th>Head</th>
    <th>Head</th>
    <th>Head</th>
    <th>Head</th>
    <th>Head</th>

  </tr>
</thead>
    <tr>
        <td><i class="fa fa-envelope fa-1x" title="Cerrada"></i> RA 02-16 </td>
        <td>15-087B-16-1</td>
        <td>950,00</td>
        <td style="text-align: right">118385,50</td>
        <td style="text-align: right">118385,57</td>
        <td class="link-view-c" aria-hidden="true" data-value="4" data-toggle="modal" style="text-align: center"><a href="#viewC" ><i class="fa fa-eye link-view-c-child" ></i></a></td>
    </tr>
    <tr>
        <td><i class="fa fa-envelope fa-1x" title="Cerrada"></i> RA 17-17</td>
        <td>15-087B-17-2</td>
        <td>142,00</td>
        <td style="text-align: right">11112,12</td>
        <td style="text-align: right">11112,12</td>
        <td style="text-align: center" data-value="14" class="link-view-c" aria-hidden="true" data-toggle="modal" ><a href="#viewC" ><i class="fa fa-eye link-view-c-child" data-value="14" ></i></a></td>
    </tr>
</tbody>
</table>

answered by 03.05.2018 в 17:15

Index of the link with jquery When the third Spinner data is selected, the Activity corresponding to the Spinner is closed

score 2 · Accepted Answer

To perform events with jquery on dynamically created elements use the following;

$(document).on( 'evento click,change,blur,etc', '#idelemento .clase', function(){
        //Todo el código aqui
    } );

With this you will refer to the DOM so it will look for any element with the class or the ID when executing the event you want.