Преобразование динамического элемента в clickeable
у меня есть следующий элемент в моем проекте:
индивидуальный код каждой коробки
<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>
дело в том, что я показываю его в зависимости от номера коробки, это может быть 1 или 1000, вопрос в том, что я хочу вернуть элемент clickeable как <a href=""> но он не направляет меня на какую-либо страницу, а делает мне действие, как это в зависимости от того, какая коробка clickeable:
$(".caja1").click(function() {
console.log("Clickeo la caja # X");
});
Как я могу вернуть clickeable элемент и в то же время в javascript знать, что элемент clickee?
Большое спасибо за помощь.
отредактировано
код обновлен до ответы, но он ничего не бросает (влияет на то, что он динамично показывает их в работе .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));
});
2 answers
Вы можете создать общий класс для всех ящиков и прослушать событие для этого класса. Затем событие дается, если, например, мы хотим название коробки мы используем find, чтобы найти класс .info-box-text то же самое будет работать для другого класса, который находится внутри коробки, как .info-box-number
Поскольку вы добавляете элементы в DOM, вы должны назначить listener элементу, который, если он существует в DOM, как в случае document. $(document).on('click','.caja',function() { ... }
$(document).on('click','.caja',function() {
//$(this) hace referencia al div con la clase caja que se clickeo
console.log($(this).find('.info-box-text').text());
console.log($(this).find('.info-box-number').text());
//Si desea obtener el id
console.log("ID " + this.id);
// Puede agrear más funcionalidad o acción a realizar
});.caja{
background : #ccc;
margin :2em;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="col-md-3 col-sm-6 col-xs-12 caja" id="caja1">
<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 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>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 caja" id="caja2">
<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 2</span>
<span class="info-box-number">42,110</span>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
</div>
</div>В моем примере я использую класс Box в единственном числе. я должен изменить это, так как в вашем отредактированном вопросе вы используете
cajas
Вы можете добавить класс к каждому из ваших ящиков и, используя зарезервированное слово this, получить, например, идентификатор каждого ящика.
Зарезервированное слово this относится к элементу, с которым вы взаимодействуете каждый момент времени.
Получить значение при динамическом создании элементов - события delegate
Поскольку вы добавляете элементы динамически с помощью функции JQuery .append() вам нужно будет использовать событие delegate, которое можно создать с помощью функции .on() из JQuery.
Я укажу вам несколько фраз, взятых из собственной документации JQuery:
Обработчики событий привязаны только к выбранным в данный момент элементам; они должны существовать в тот момент, когда ваш код делает вызов. on().
Т. е. если бы мы сделали вызов метода JQuery .on(), как обычно (непосредственно в класс .caja), нам нужно будет добавить все элементы с помощью функции .append() перед вызовом метода .on().
Пример выполнения вызова метода .on() После добавления элементов:
$("#cajas").append("<div id='caja1' class='caja'></div>");
$("#cajas").append("<div id='caja2' class='caja'></div>");
$("#cajas").append("<div id='caja3' class='caja'></div>");
$(".caja").on('click', function(){
console.log("Clickeo la caja: " + this.id);
});.caja{
display: inline-block;
height: 200px;
width: 200px;
background-color: red;
margin: 3px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cajas"></div>Пример выполнения вызова метода .on() Перед добавлением элементов:
$(".caja").on('click', function(){
console.log("Clickeo la caja: " + this.id);
});
$("#cajas").append("<div id='caja1' class='caja'></div>");
$("#cajas").append("<div id='caja2' class='caja'></div>");
$("#cajas").append("<div id='caja3' class='caja'></div>");.caja{
display: inline-block;
height: 200px;
width: 200px;
background-color: red;
margin: 3px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cajas"></div>Как вы можете заметить, в этот второй пример, как упоминалось в документации, событие не может быть выброшено, когда элементы добавляются после вызова метода .on().
Для этого необходимо использовать события delegate. Согласно документации:
Преимущество событий delegate заключается в том, что они могут обрабатывать события из элементов-потомков, которые добавляются в документ позже.
Т., мы можем добавить обработчик событий к родительскому элементу, но он, в свою очередь, будет обрабатывать событие в случае, если мы добавили к нему элемент потомка.
Чтобы создать событие delegate структура будет выглядеть так:
$(referencia a elemento padre).on('click', referencia a elemento hijo, function(){
//Código aquí
});
Мы могли бы ссылаться на document в качестве родительского элемента, но я предпочел добавить контейнер в коробки, так как таким образом, если у вас были другие элементы с классом .caja за пределами этого контейнера, и вы не хотели добавление этого события к ним не будет применяться.
Я оставляю вам пример, применяя все вышеперечисленное:
$("#cajas").on('click', '.caja', function(){
console.log("Clickeo la caja: " + this.id);
});
$("#cajas").append("<div id='caja1' class='caja'></div>");
$("#cajas").append("<div id='caja2' class='caja'></div>");
$("#cajas").append("<div id='caja3' class='caja'></div>");.caja{
display: inline-block;
height: 200px;
width: 200px;
background-color: red;
margin: 3px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cajas"></div>