0

我有一个奇怪的问题。我正在克隆一个隐藏元素并将其附加到由 jquery 创建的 div 中。它工作正常，但不是当我点击 div 的任何子元素（基本上是图像和一些文本。如果我点击任何子元素它会动画到克隆发生时的点，然后停止.在这些元素之外的任何地方，在.over div内，这很好。我的可点击div的html是：

<li class="infobox">
   <a href="#"><img class="thumb" src="img/10.jpg" alt="image10" /></a>
   <div class="over">
   <img src="img/search_icon.png" alt="read more" />
   <h6>New business</h6>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
   </div>
 </li>

我的jQuery代码是：

$('#news_gallery li').click(function(event) {

    var index = newsover.index($(this)); //cycle through read more links
    var offset = $(this).offset();  //Get the thumb position to animate from
    var animFinished = false;  //Create boolean to check when ani finishes

    $('#news-articles .news-article').hide().eq(index).show(); // show the article for the corresponding link and hide the others

    var article = $('#news-articles .news-article').eq(index);


    // Create the expanded item container
    var expandedItem = $('<div>', {
        id: 'item-expanded',
        css: {
            width: DDBR.constant.ITEM_WIDTH,
            height: DDBR.constant.ITEM_HEIGHT,
            background: '#fff',
            position: 'absolute',
            zIndex: 999
            },  
        });         

    // Get the current item offset to animate from
    expandedItem.css({
        top: offset.top,
        left: offset.left,
        overflow: 'hidden',
        opacity: 0
        });

    $('body').append(expandedItem);  //Add the shaded overlay and the expanded item to the body

    //Animate the size of the expanded item
    expandedItem.animate({
        width: DDBR.constant.ITEM_EXPANDED_WIDTH,
        height: DDBR.constant.ITEM_EXPANDED_HEIGHT,
        left: $(window).scrollLeft() + $(window).width()/2,
        top: $(window).scrollTop() + $(window).height()/2,
        marginTop: -DDBR.constant.ITEM_EXPANDED_HEIGHT/2,
        marginLeft: -DDBR.constant.ITEM_EXPANDED_WIDTH/2,
        opacity: 1
        }, {
            duration: DDBR.constant.ITEM_ANIMATION_SPEED,
            easing: DDBR.constant.ITEM_ANIMATION_EASING,
            queue: false,
            complete: function() {
                animFinished = true;
                if (animFinished) {
                    expandFurther();                            
                    }
                }
            }); 


    var articleClone = article.clone();  // clone the article for the corresponding link
    var articleHeight = article.actual('outerHeight'); //Get the height of the hidden div

    //expand the box further from the center
    expandFurther = function() {
        expandedItem.animate({
            width: 875,
            height: articleHeight,
            marginTop: -articleHeight/2,
            marginLeft: -875/2
            }, {
                duration: DDBR.constant.ITEM_ANIMATION_SPEED,
                easing: DDBR.constant.ITEM_ANIMATION_EASING,
                queue: false,
                complete: function() {
                    animFinished = true;
                    if (animFinished) {
                    loadContent();
                    }
                }
            })              
        }; //END expandFurther function

    loadContent = function() {
        animFinished = false;       
        expandedItem.append(articleClone);  //Add the cloned image to the expanded item container
        }; //END loadContent function

}); //END click function

对于相当广泛的代码感到抱歉。就像我说的，只要我单击父 div 中的任何其他位置，它就可以正常工作，但当我单击 div 中的子元素时就不行。

对此的任何帮助将不胜感激。非常感谢。

4

1 回答 1

0

代替 

var articleClone = article.clone();

利用

 var articleClone = article.clone(true);

这将复制附加到元素的事件，您的问题应该得到解决。

演示

从文档

.clone( [withDataAndEvents] )

withDataAndEvents一个布尔值，指示是否应将事件处理程序与元素一起复制。从 jQuery 1.4 开始，元素数据也将被复制。

于 2012-05-24T16:29:05.810 回答