Tengo una serie de elementos div en los que se puede hacer clic y quiero obtener el contenido de un elemento de texto en función de la identificación única de cada div.

<div class='square' id='sq12'><p class='text'><br/>"Text I want to fetch"</p></div>

Estoy usando jquery para detectar cuándo se hace clic en la clase cuadrada, buscar la identificación asociada a ella y luego tomar el contenido de la clase de texto. Funciona bien cuando el usuario hace clic en cualquier lugar en blanco en el div, pero si hace clic directamente sobre el texto, no puede leer la identificación principal y arroja el error

Cannot read property 'getElementsByClassName' of null

Estoy usando esto para detectar clic:

 $('body').on('click', '.square', function(e) 
         {
    var fetchedText = document.getElementById(e.target.id).getElementsByClassName('text')[0].innerHTML;

    alert(fetchedText);             

        });

¿Hay alguna manera de detectar la identificación del div padre desde el elemento de clase de texto en el que se hizo clic o necesito un enfoque completamente diferente?

Sospecho que es fácil, pero estoy desapareciendo.

2
brianfit 25 feb. 2018 a las 10:23

3 respuestas

La mejor respuesta

El elemento hijo acepta eventos de puntero, y puede evitarlos a través de CSS para permitir que el clic recaiga en el padre y desencadene el comportamiento deseado:

.square p {
    pointer-events: none;
}
2
dunck 25 feb. 2018 a las 10:15

Esto es trabajo para mí

<style>
.square {
   height:50px;
   border:1px solid black
}
.text {
  border:1px solid green
}
</style>

<div class="square">
    <p class="text">hola</p>
</div>

<script>
$('body').on('click', '.square', function(e) 
{
    alert($(this).text());             
});
</script>
0
dunck 25 feb. 2018 a las 10:52

¿Hay alguna manera de detectar la identificación del div padre desde el elemento de clase de texto en el que se hizo clic?

Su selector es .square, por lo que no hay padre, y si desea detectar id puede usar $(this).attr('id') y con $(this).children('.text').html() puede devolver hijos html.

$('body').on('click', '.square', function(e) {
  var fetchedText = $(this).children('.text').html();
  var Id = $(this).attr('id');
  console.log(Id);
  console.log(fetchedText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='square' id='sq11'>
  <p class='text'><br/>"Text I want to fetch 1"</p>
</div>

<div class='square' id='sq12'>
  <p class='text'><br/>"Text I want to fetch 2"</p>
</div>

<div class='square' id='sq13'>
  <p class='text'><br/>"Text I want to fetch 3"</p>
</div>

Pero si desea obtener el padre id de los niños, puede probar .parent():

$('body').on('click', '.text', function(e) {
  // OR var fetchedText = $(this).html();
  var parentId = $(this).parent().attr('id');
  var fetchedText = $('#'+parentId).children('.text').html();
  console.log(fetchedText);
  console.log(parentId);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='square' id='sq11'>
  <p class='text'><br/>"Text I want to fetch 1"</p>
</div>

<div class='square' id='sq12'>
  <p class='text'><br/>"Text I want to fetch 2"</p>
</div>

<div class='square' id='sq13'>
  <p class='text'><br/>"Text I want to fetch 3"</p>
</div>

e.target.id devuelve un id que e.target devuelve <p class="text"> por lo que no hay id para obtener.

2
Pedram 25 feb. 2018 a las 07:41