I have the following element in my project:
Individual code of each box
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="info-box bg-aqua">
<span class="info-box-icon"><i class="fa fa-bookmark-o"></i></span>
<div class="info-box-content">
<span class="info-box-text">Caja</span>
<span class="info-box-number">41,410</span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
</div>
The point is that I show it depending on the number of the box, it can be 1 or 1000, the point is that I want to return the clickable element as a <a href="">
but that does not direct me to any page but rather makes me an action like this DEPENDING on which box I click:
$(".caja1").click(function() {
console.log("Clickeo la caja # X");
});
How can I make the element clickable and at the same time in javascript know which element to click?
Thank you very much for the help.
EDITED
Updated code to the answers but it does not launch anything (Affect that it is showing them dynamically in the operation of the .click()...
?)
$("#buscarLote").click(function() {
var valor = document.getElementById("loteBuscar").value;
var totalCajas;
var iter = [];
$.ajax({
url: "views/ajax/OIT.php",
method: "GET",
data: { funcion: "funcion6", box: valor },
async: false,
dataType: "json",
success: function(respuesta) {
totalCajas = respuesta.cantidadCajas;
//console.log(respuesta.cantidadCajas);
for (var i = totalCajas; i > 0; i--) {
$(".contenedorCajas").append('<div class="col-md-3 col-sm-6 col-xs-12 cajas" id="' + (i - 1) + '"><div class="info-box bg-aqua"><span class="info-box-icon"><i class="fa fa-cube"></i></span><div class="info-box-content"><span class="info-box-text">Caja ' + (i - 1) + '</span><span class="info-box-number">41,410</span><div class="progress"><div class="progress-bar" style="width: 70%"></div></div><span class="progress-description">70% Increase in 30 Days</span></div><!-- /.info-box-content --></div><!-- /.info-box --></div>');
}
}
});
});
$(".cajas").click(function() {
console.log($(this.id));
});
You can create a general class for all boxes and listen to the event to that class. After the event occurs if for example we want the title of the box we use
find
to find the class.info-box-text
the same would work for another class that is inside the box like.info-box-number
Since you add the elements to the DOM , you have to assign the
listener
to an element that does exist in the DOM, as is the case withdocument
.$(document).on('click','.caja',function() { ... }
You could add a class to each of your boxes and, using the keyword
this
, get for example the id of each box.The reserved word
this
refers to the element with which you are interacting at any given time.Get value when you generate the elements dynamically - Events delegate
Since you are adding the elements dynamically via the
.append()
JQuery function you will need to use a delegate event, which you can raise via the.on()
JQuery function.I am going to indicate several phrases taken from the JQuery documentation itself:
.on()
That is, if we were to make the JQuery method call as usual (directly to the class.caja
), we would have to add all the elements via the function.append()
before calling the method.on()
.Example calling the method
.on()
after adding the elements:Example calling the method
.on()
before adding the elements:As you can see, in this second example, as the documentation mentioned, the event cannot be raised when elements are added after the method call has been made
.on()
.This will require you to use the delegate events . According to the documentation:
That is, we can add an event handler to the parent element but which, in turn, will process an event in case we have added a descendant element to it.
To create a delegate event the structure would be like this:
We could refer to
document
as a parent element but I have preferred to add a container to the boxes since in this way, in case you had other elements with the class.caja
outside this container and you did not want to add said event to them, it would not be applied to them.I leave you an example applying all of the above: