jQuery stopPropagation not effective

I'm just completely stumped, I looked over a lot of the similar questions but I can't figure out why this click event keeps propagating. 开发者_Go百科

Here is the code:

$("#view-radio").buttonset().bind('click', function(e) {
            redraw(Testimonials);
            e.stopPropagation();
        });

Here is the radio buttons

<div id="view-radio" class="i-obj buttonset">
  <input type="radio" id="gridradio" name="view-radio" checked="checked" value="grid" />
    <label for="gridradio"> <img src="http://SwolePersonalTraining.com/beta/wp-content/themes/striking/images/gridview.jpg" class="icon">Grid View</label>
 <input type="radio" id="listradio" name="view-radio" value="list" />
    <label for="listradio"><img src="http://SwolePersonalTraining.com/beta/wp-content/themes/striking/images/listview.jpg" class="icon">List View</label>
</div>

You can find the page in action here: http://swolepersonaltraining.com/beta/?page_id=380

Here is the complete code: http://swolepersonaltraining.com/beta/wp-content/themes/striking/js/custom/custom_testimonial.js?ver=3.1.3

Any ideas?

I can't swear it because it's difficult to test in your live site, but I think that what's happening is that you bound the click event of the view-radio div instead of each of the two radio buttons inside it.

I'd try something like:

$("#view-radio").buttonset().     // Turn radio buttons of the div in a buttonset 
    find('input').bind('click',   // Bind the click event of each of the two radios
    ....

EDIT:

Yes! It works! http://jsfiddle.net/marcosfromero/TDsrj/

And stopPropagation isn't needed (read other answers to know why).