How to know which div was clicked without static id?

Question

How to know which div was clicked without static id?

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (0 votes)

2

I want to perform an action when I click on a div, but that div is generated dynamically according to the records of the BD, so its id could always vary. For example:

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

so I should know in which of those divs you click on it so that then an edit form of that plant appears.

Code:

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

This code is what gives me an alert with value "div11", the point is that I have a limit of 10 plants and that value that gives me back is static.

In summary:

I want to know which div is clicked without naming it statically.

javascript jquery

asked by David 08.02.2017 в 18:58

source

4 answers

1

What you can do is delegate events to the children of the father with this code:

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

What we do is select the parent ( $("#blog-test-cont") ) and delegate the event click() to the children ("click", "div", in this case the div with id="identificador1" , id="identificador2" , etc.

The following example has dynamic content which is used to delegate events to children:

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>

Reference: link

answered by 08.02.2017 в 19:14

1

You could take your id when you click on it in the following way:

$(".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>

I hope I helped you. Anything you tell us.

Greetings!

answered by 08.02.2017 в 19:02

0

This is a classic problem, the trick is to get all the divs of a container querySelectorAll(".contenedor > div"); and iterate them referring to evt.target which will provide you with information about the div that was clicked

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>

answered by 08.02.2017 в 22:14

Center a link Center the contents of a div without aligning the text Bootstrap

score 3 · Accepted Answer

Try this:

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>

Greetings,