2

Quiero realizar una accion al momento de dar clic en un div, pero dicho div se genera dinamicamente conforme a los registros de la BD, asi que su id siempre podria variar. Por ejemplo:

id="identificador1", id="identificador2", id="identificador3"

por lo cual debo de saber en cual de esos divs se le da clic para que luego aparezca un formulario de edición de dicha planta.

Codigo:

        for (var x = 1; x <= conteo; x++) {
            $("#editar"+x).bind('click', $.proxy(function () {
                alert("div"+x);
            }, this));
        }

Este codigo lo que me produce es darme un alerta con valor "div11", el punto es que tengo un limite de 10 plantas y ese valor que me devuelve es estatico.

En resumen:

Quiero saber en que div se da clic sin nombrarlo estaticamente.

4 respuestas 4

3

Prueba esto:

jQuery(document).ready(function(){
  jQuery('.divs').on('click', function(){
    var id = jQuery(this).data('id');
    console.log('el id seleccionado es' + id);
                     });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="identificador1" data-id="1" class="divs">clic aqui!</div>
<div id="identificador2" data-id="2" class="divs">clic aqui!</div>
<div id="identificador3" data-id="3" class="divs">clic aqui!</div>
<div id="identificador4" data-id="4" class="divs">clic aqui!</div>

Saludos,

2
  • Es exactamente el mismo código, publicado después del mío. El autor me pide que haga cambios y votan todos tu respuesta. No lo entiendo...
    – Genarito
    el 9 feb. 2017 a las 2:51
  • Mejor dicho, soy la única respuesta sin votos
    – Genarito
    el 9 feb. 2017 a las 2:57
1

Lo que puedes hacer es delegar eventos a los hijos del padre con este código:

$("#blog-test-cont").on("click", "div", function(){...});

Lo que hacemos es seleccionar el padre ($("#blog-test-cont")) y delegar el evento click() hacia los hijos ("click", "div", en este caso los div con id="identificador1",id="identificador2", etc.

El siguiente ejemplo tiene contenido dinámico el cual sirve para delegar los eventos hacia los hijos:

var bt_count = 1;
$("#blog-test-cont").on("click", "div", function(){
	$(this).after("<div id=\"identificador" + (bt_count+1) + "\">Pulsa para probar " + (++bt_count) + "</div>");
  console.log($(this).attr("id"))
});
#blog-test-cont div {
    background-color: #faf8f2;
    cursor: pointer;
    border: 1px solid #a95809;
    padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="blog-test-cont" style="border:1px solid black;">
  <div id="identificador1">Pulsa para probar</div>
</div>

Referencia: http://www.arumeinformatica.es/blog/jquery-asociar-eventos-a-elementos-html-creados-dinamicamente/

1

Podrías tomar su id cuando clickean en él de la siguiente forma:

$(".clickeable span").on("click", function() {
  var id = $(this).attr("id");
  console.log("Clickeaste en el div con id " + id);
});
.clickeable {
  background-color: blue;
  height: 50px;
  width: 50px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clickeable"><span id="1" >Div 1</span></div>
<br>
<div class="clickeable"><span id="2" >Div 2<span></div>

Espero haberte ayudado. Cualquier cosa nos avisas.

Saludos!

4
  • respondí lo mismo =), saludos!
    – jolsalazar
    el 8 feb. 2017 a las 18:06
  • Ya lo hice como me recomendaron, solo que tengo un span dentro de mi div que quiero que haga la accion, esto debido a que el span ya tiene clase y id que le generan su estilo, asi que por eso decidi meterlo dentro del id, el problema es que cuando doy clic en el div necesito darlo en el espan, pero esto me obtiene dos id y yo solo quiero el del div, como divido o hago la restriccion para que solo me obtenga un valor.
    – David
    el 8 feb. 2017 a las 18:26
  • Ahí edité el código para que al clickear dentro de los span que están dentro del div se disparen los eventos. Sino podrías dejar el código como estaba antes y ponerle el class="clickeable" al <span>. Saludos!
    – Genarito
    el 8 feb. 2017 a las 18:29
  • buena respuesta!, saludos
    – jolsalazar
    el 9 feb. 2017 a las 13:01
0

Este es un problema clasico, el truco es obtener todos los divs de un contenedor querySelectorAll(".contenedor > div"); e iterarlos haciendo referencia a evt.target el cual te proporcionara informacion del div que fue clickeado

var hijos = document.querySelectorAll(".contenedor > div");

for (hijo of hijos) {
    hijo.addEventListener("click", function(evt){
        var hijito = evt.target;
        console.log("click en ", hijito.id);
    });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="contenedor">
<div id="identificador1" data-id="1" class="divs">pulsame</div>
<div id="identificador2" data-id="2" class="divs">pulsame</div>
<div id="identificador3" data-id="3" class="divs">pulsame</div>
<div id="identificador4" data-id="4" class="divs">pulsame</div>
  </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.