Bubbling issue - Need Help

Bubbling issue - Need Help

Hi I have below HTML Markup,

  <ul class="list-unstyled" style="float:right;">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><strong class="caret"></strong>&nbsp;Report</a>
                                <ul class="dropdown-menu" style="position:relative;">
                                    <li>
                                        <a href="#" id="mis" class="cl-mis" target="_self">Miscategorized</a>
                                    </li>
                                    <li>
                                        <a class="cl-mis" id="prob" href="#" >Prohibited/Fraud</a>
                                    </li>
                                    <li>
                                        <a class="cl-mis" id="spam" href="#">Spam/Overpost</a>
                                    </li>                                                                                        
                                    <li class="divider"></li>
                                    <li>
                                        <a href="#">Contact Form</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>


and I have this jquery ajax call,

$(document).ready(function(){ 
                $(".dropdown").click( function( event ) {
                    if(!$(event.target).is("a")){
                        var time =new Date().getTime();              
                        $('a.cl-mis').one("click", function(event){
                            event.stopPropagation();
                            type = $(this).attr("id");
                            $.ajax({
                                type: "Get",
                                url: "myurl",                            
                                data: "category=${category}&subcategory=${subcategoryid}&id=${PageId}&timestamp="+time+"&type="+type+"",
                                contentType: "application/json; charset=utf-8",
                                dataType: "html",
                                async:false,
                                cache:false,
                                success: function(html) {
                                    $('span.cl-flag-confirm').append(html)
                                },
                                error: function(html) {
                                    $('span.cl-flag-confirm').append(html)
                                }
                            });
                        
                            $('a.cl-mis').unbind('click');
                        });
                        return false;
                    }
                } );
                
            });

Now when I click on Report link, it bubbles down , I want to prevent it from bubling down. I tried stop event propagation and return false, but it seems like they prevent events passing down. With these functions ajax call is not trigged.

I need some thoughts as how to over come this bubbling down