单击jQuery按钮内的span

Question

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.

Answer 1

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();
});

Answer 2

or:

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

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