jQuery - if text in DIV was clicked

Question

I have some DIVs. Inside these DIVs are some texts, images, tags... I need to show "alert", when text is clicked. Not images, not other tags, not text in other tags... just text inside DIVs. How to do it with jQuery ?

jsFiddle example.

HTML

<div style="background-color:PapayaWhip;">Some text. 
 <img src="http://ynternet.sk/test2/close_1.jpg" /> 
 <img src="http://ynternet.sk/test2/close_2.jpg" /> 
</div> 
<div style="background-color:Moccasin;">This are letters 
 <em>and this are not.</em> 
 Hello again!
</div> 
<div style="background-color:LightGoldenRodYellow;">
 <img src="http://ynternet.sk/test2/close_1.jpg" />
 <img src="http://ynternet.sk/test2/close_2.jpg" />
 Letters in new line.
 <img src="http://ynternet.sk/test2/close_1.jpg" />
 <img src="http://ynternet.sk/test2/close_2.jpg" /> 
</div> 
<div style="background-color:Wheat;">New letters in another line.</div>

CSS

div {
  padding:10px 0px 0px 20px;
  font-family:Verdana;
  height:40px;
}
em{
  color:red;
}

@user1232020 Not at all relevant to this question. – Anthony Grist Feb 18 '13 at 12:55 — Anthony Grist, Feb 18 '13 at 12:55

score 8 · Accepted Answer · answered Feb 18 '13 at 12:54

8

Check the type of source if div then it means it would be text wrapped directly by the div. If you want to include mode tag like em then you can add those in condition.

Live Demo

$('div').click(function(evt){  
    if(evt.target.tagName == 'DIV')
        alert("div clicked");
});

answered Feb 18 '13 at 12:54

Adil

146,340
25
209
204

This is really the best answer. It doesn't require any changes to the HTML and uses the minimum number of event handlers. It wouldn't handle nested `
` elements, but the question doesn't indicate that's a requirement or possibility, so no need to do so.
– Anthony Grist Feb 18 '13 at 13:03

score 6 · Answer 2 · answered Feb 18 '13 at 12:53

6

You could use some jQuery magic and look at the children of the div, however I would add a span or label inside your divs and give it a class/id:

<span class="letters">
  Letters in new line
</span>

$(".letters").click(function() {
    alert('Clicked');
});

http://jsfiddle.net/meNJu/

The fiddle provided shows how to use it with children() as well as the method mentioned above.

http://jsfiddle.net/meNJu/1/

Demonstrating using a class rather than an ID.

answered Feb 18 '13 at 12:53

Darren

68,902
24
138
144

Better off using a class, since the `id` attribute of every element on the page should be unique. – Anthony Grist Feb 18 '13 at 12:56
@AnthonyGrist true. Adjusted. – Darren Feb 18 '13 at 12:58

score 1 · Answer 3 · answered Feb 18 '13 at 12:52

1

You can stop the propagation of the event from all children of the divs:

$('div').click(function (event) {
    alert('Text');
});
$('div').children().click(function (event) {
    event.stopPropagation();
});

Updated fiddle.

answered Feb 18 '13 at 12:52

Konstantin Dinev

34,219
14
75
100

score 1 · Answer 4 · answered Feb 18 '13 at 12:58

1

Would it not be viable to use a Span with the class text

With this code

$(".text").click(function() {
 alert("Handler for click() called.");
});

( answer posted from phone, untested code. Post will be spellchecked once at a pc )

answered Feb 18 '13 at 12:58

Mark Jones

115
8

1

In heine sight you could use would .. $('div').text().click(function {}). Work – Mark Jones Feb 18 '13 at 13:04

score 1 · Answer 5 · answered Feb 18 '13 at 12:59

1

This is quite simple:

$('div').click(function (e) {

    if ($(this).children().length === 0) {
        // do something
        alert($(this).text());
    }
});

$('div').children().click(function (event) {
    event.stopPropagation();
});

Demo

answered Feb 18 '13 at 12:59

palaѕн

72,112
17
116
136

score 0 · Answer 6 · answered Feb 18 '13 at 13:00

Well, if I understood correctly what you're trying to do, you will need to do the following:

html

<div>
    <span class="click">This are letters</span>
    <em>and this are not.</em> 
    Hello again!
</div>

jQuery:

$('.click').on('click', function(){
    alert($(this).html()):
});

This was just a very simple example but it may help you

jQuery - if text in DIV was clicked

6 Answers6