CODEWITHSUNDEEP
javascriptjqueryhtmlcss
brianfit
brianfit

Reputation: 1919

Make entire div, including text, clickable

I have a series of clickable div elements and I want to fetch the contents of a text element within based on each div's unique id. 

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

I'm using jquery to detect when the square class is clicked, fetch the id associated with it, and then grap the text class contents. It works fine when the user clicks anywhere blank in the div, but if they click directly over the text, it can't read the parent id and throws the error

Cannot read property 'getElementsByClassName' of null

I'm using this to detect click:

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

    alert(fetchedText);             

        });

Is there a way to detect the parent div's id from the clicked text-class element or do I need an entirely different approach?

I suspect this is an easy one, but I'm blanking out.

Upvotes: 2

Views: 129

Answers (3)

Luis Gar
Luis Gar

Reputation: 471

This is working for me

<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>

Upvotes: 0

denmch
denmch

Reputation: 1516

The child element accepts pointer events of its own, and you can prevent them through CSS to allow the click to fall to the parent and trigger your desired behavior:

.square p {
    pointer-events: none;
}

Upvotes: 2

Pedram
Pedram

Reputation: 16575

Is there a way to detect the parent div's id from the clicked text-class element

Your selector is .square so there is no parent, and if you want to detect id you can use $(this).attr('id') and with $(this).children('.text').html() you can return children 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>

But if you want to get parent id from children you can try .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 return an id which e.target return <p class="text"> so there is no id to get.

Upvotes: 2

Related Questions