CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Devbuddy
Devbuddy

Reputation: 231

How to detect that the HTML element has text by clicking on text content area?

I have text content and a boxed element in a div but still changes happen when I click on boxed element while I need to make changes only when I click on text content.

Here is the code:https://jsfiddle.net/Issact/u0g8LLLo/

<div>
some text
<span class="box"></span>
</div>

<div>
some text
</div>

<div><span class="box"></span></div>

JS: 

$(document).on('click','div', function(){
    if (!$(this).text().trim().length > 0) {
        $(this).text("foo");
    } else {
    $(this).append('<span>You clicked on a text</span>');
    }

});

Upvotes: 0

Views: 964

Answers (5)

James Norman
James Norman

Reputation: 515

This is the way you should do. As this selects the body element and any element inside body that has text, will go into the if statement, if you need elese statement as well, you add so after the if. 

$(document).on('click','body', function(e){
   var clickedTag, text;
   clickedtag = e.target;
   text = $(clickedtag).text().trim();
   if(text.length > 0){
     console.log(text);
   }
});

Upvotes: 1

Arngue
Arngue

Reputation: 235

As long as you have id's and classes you can try comparing ids or classes

$(document).on('click','div', function(e){
if (e.target.id.toString() == "box" || $(e.target).hasClass("box")) {
    $(this).append('<span>foo</span>');
} else {
    $(this).append('<span>You clicked on a text</span>');
}

https://jsfiddle.net/q6vbohxm/

Upvotes: 1

Honey
Honey

Reputation: 386

This is happening because of event bubbling, so we need to stop that. Jquery having method to stop it event.stopPropagation();. Here I used div * selector to prevent firing event for all the child element inside div. Instead of div you can use any class to differentiate from other div

$(document).on('click','div', function(){


    $(this).append('<span>You clicked on a text</span>');

    
}).on("click","div *", function(e){e.stopPropagation();});
.box {
  background-color:green;
  height:50px;
  width:50px;
  display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
some text
<span class="box"></span>
</div>

Upvotes: 0

Muneeb
Muneeb

Reputation: 1549

wrap your text in separate element and fire click event on that element and also use .stopPropagation() method...

  $("#demo").click(function(event){
    event.stopPropagation();
    alert("your text element was clicked");
  });

Upvotes: 0

Ori Drori
Ori Drori

Reputation: 191976

When you bind an event handler to a node, or use event delegation, this refers to the node the event was bonded to (or delegated to in the case of on).

Click the .box inside the 1st div element, gets the div as this. Since the div element contains text, you the wrong result.

Instead you should get the event target. The target is the actual element clicked.

$(document).on('click', 'div', function(e) {

  var $target = $(e.target); // the event target
  
  if (!$target.text().trim().length > 0) {
    $target.text("foo");
  } else {
    $target.append('<span>You clicked on a text</span>');
  }

});
.box {
  background-color: green;
  height: 50px;
  width: 50px;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  some text
  <span class="box"></span>
</div>

<div>
  some text
</div>

<div><span class="box"></span></div>

Upvotes: 5

Related Questions