How to add events to a list of buttons in a cycle with Jquery?

Navigation
1

Good, I have this in my Jquery code: 

    $("#borrarImagen0").click(function() {
      editarImagen(0);
    });

    $("#borrarImagen1").click(function() {
     editarImagen(1);
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I want to do something like: 

for(i = 0; i < 2; i++) { 
  $("#borrarImagen"+i).click(function() {
    editarImagen(i);
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

But it's not working, I really do not understand why, because it's a simple loop, but it still does not work.

The problem is that I have another loop of these, but where there are 15 elements and if I have to make any changes it is very cumbersome to change it everywhere.

Look everywhere, but I did not find a way to solve it.

    
asked by Fedo Peralta 11.09.2017 в 14:22
source

3 answers

0

Another option with JQuery (and es6) is to use a class in this way 

<button class="eliminar">Click</button>

Then select and use each() of jquery, as follows: 

function editarImagen(imagenId) {
  alert('Editando ' + imagenId);
}

$('.eliminaImagen').each((index, element) => $(element).click(() => editarImagen(index)));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="eliminaImagen">Elimina 1</button>
<button class="eliminaImagen">Elimina 2</button>
<button class="eliminaImagen">Elimina 3</button>
<button class="eliminaImagen">Elimina 4</button>

Depending on the layout of your images, you may need to correct some indexes.

    
answered by 11.09.2017 / 16:08
source
2

I do not know how you declared the variable i of the for loop, but possibly the problem comes from there: the loop iterates over i from 0 to 2. When i is two, the loop stops.

Then comes the possible problem: Any click causes editarImagen(i) to be executed, but i is 2 for all the elements if it has been declared as var or if it is a variable global (not declared): 

for (var i=0;i<4;i++) {
  $('#b'+i).click(function() {
    console.log('La variable i vale ' +i);
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b0">Click</button>
<button id="b1">Click</button>
<button id="b2">Click</button>
<button id="b3">Click</button>

This problem is solved using let to declare the variable, because for each iteration it is created again and, therefore, for each call to the function editarImagen , you would have a variable with a different value. 

for (let i=0;i<4;i++) {
  $('#b'+i).click(function() {
    console.log('La variable i vale ' +i);
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b0">Click</button>
<button id="b1">Click</button>
<button id="b2">Click</button>
<button id="b3">Click</button>
    
answered by 11.09.2017 в 15:33
1

Instead of walking with for, use each to assign the function to click on all the images, and then work with it with this . I've placed a function to delete the images too so you can see how it works. 

$(document).ready(asignarfuncion);

function asignarfuncion(){
    $( "img" ).each(function(index) {
        $(this).unbind();
        $(this).click(function(){
            editarImagen(index);
        });
    });
}

function editarImagen(index){
    $("img").eq(index).remove();
    asignarfuncion();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://gloria-project.eu/wp-content/uploads/2012/06/logo-256-transp.png"/>
<hr/>
<img src="https://vignette1.wikia.nocookie.net/fallout/images/a/a0/Internet_Explorer_9_logo.png/revision/latest?cb=20110908011258&path-prefix=es"/>
    
answered by 11.09.2017 в 16:01
How to add a table dynamically with jquery? Get the variable id that contains a label to