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 に答える