Question

I have a div containing information. Wraped around the div I have a ‘a’ tag so that when a user clicks anywhere around the div the fancy box opens.

However inside the div I andother link that when clicked instead of opening the fancy box it deleted the whole div. I used return false in the click event for the delete which worked.

I have now had to add .live to the click because newly created elemnet were not getting the click event.

Since then though when I click the delete link the div does delete but the fancy box opens also.

Thanks for any help.

        $(".listContent").live('mouseenter', function(){
         $(this).fancybox({
            'type':'ajax',
            });
        });

        $("div.removeCompare").live("click", function() {
            $(this).parents(".listingContainer").remove();                                          
            return false;
        });         

Div

           <div class="listingContainer grid_9 alpha omega">                    
                <a class="listContent" href="adContent.html">
                    <div class="listingWrapper">
                        <div class="grid_8 alpha omega">
                        <div class="listingContent">
                            <div class="imgHolder">
                                <img src="imgs/cars/SearchThumb-10053325.jpg" width="100" height="75">
                            </div>
                            <div class="descHolder">
                                <div id="cars"></div>                            
                                <h3>Fancy Car</h3><div class="removeCompare">Remove</div>
                                <p>Lorem ipsum dolor sit amet, pri ex duis maiorum commune, illud viderer suscipiantur eam an. Dolorum recteque qui in. Pro inani nulla tacimates ex, qu</p>
                                <span class="listingPrice">€4,000</span>
                                <span class="listingDate">Listed: Today</span>
                                <span class="listingLocation">Co. Waterford</span>
                                <span class="listingViews">Viewed: 20 Times</span>
                            </div>
                        </div>
                    </div>
                    <div class="goTo goTo_unfocus grid_1 alpha omega">
                        <div class="gotoWrapper">
                                Click to View
                                <div class="imgVeiw"></div>

                            </div>
                        </div>
                    </div><!--End listingWrapper-->
                </a>
            </div>

Answer 1

Updated:
This code should most probably work.

$(".listContent").live('click', function(e) {
    e.preventDefault();
    $(this).fancybox({
        'type': 'ajax'
    });
    console.log('inside fancybox creator');
});

$("div.removeCompare").live('mousedown', function(e) {
    e.stopPropagation();
    console.log('inside remove');
    $(this).parents(".listingContainer").remove();
});

I think your problem was with event propagation – when you click on a child element the related event of parent too fires up. So e.stopPropagation() will stop that.