Question

我有一个包含信息的div。在div周围我有一个'a'标签，这样当用户点击div周围的任何地方时，花式框就会打开。

然而在div我和其他链接里面，当点击而不是打开花式框时，它删除了整个div。我在click事件中使用了return false来进行删除工作。

我现在必须在点击中添加.live，因为新创建的elemnet没有获得点击事件。

从那时起，当我点击删除链接时，div会删除，但也会打开花式框。

感谢您的帮助。

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

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

股利

           <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

<强>更新 This code应该最有效。

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

我认为您的问题出在event propagation上 - 当您点击子元素时，父级的相关事件也会激活。所以e.stopPropagation()会阻止它。

Answer 2

在div的click事件函数中，使用.die（'mouseenter'）事件处理程序取消绑定语法解除内部元素（打开fancybox）的mouseenter事件。

div中的jQuery fancybox链接

2 个答案: