CODEWITHSUNDEEP
javascriptjqueryjquery-ui
user1044169
user1044169

Reputation: 2866

Click span inside jQuery button

Part of a bigger solution, I have accordion-type jQuery control that implements headers as jQuery toggle buttons. Each header also has to have a help balloon. In nutshell, the setup is similar to that posted at this jsFiddle . 

<div id="button1">Go to main action <span id="span1" style="color:blue">Help</span>     </div>
<div id="out"/>
$('#button1').button().click(function(){
    $('#out').text('Button clicked');
});

$('#span1').click(function(){
    $('#out').text('Span clicked');
});

Is that possible to make it so I can click on the Help span, which is located inside the button div? Or, will button always get the events for all of its content preventing inside elements from getting click events?

Thank you.

Upvotes: 0

Views: 2511

Answers (2)

gregjer
gregjer

Reputation: 2843

or:

$('#span1').click(function(){
    $('#out').text('Span clicked');
    return false;
});

jSfiddle http://jsfiddle.net/kxntf/5/

Upvotes: 2

Talha Akbar
Talha Akbar

Reputation: 10030

Your event first fires on span and then also on button. You can prevent the event to be fired on parent by stopPropagation() method. Also, return false do the same.

Fiddle for demonstration

$('#span1').click(function(e){
    $('#out').text('Span clicked');
    e.stopPropagation();
});

Upvotes: 5

Related Questions