bootstrap accordian或hide和Show在jQuery中的动态创建元素下无法正常工作

Question

在我的一个示例应用程序中，当单击特定项目时，它将显示弹出的特定项目的描述。当我尝试使用bootstrap手风琴或隐藏并显示此处没有任何作用时，除了jQuery委托事件处理程序。

在grid.js中是第三方插件提供动态元素创建。

这是一个名为portfolio_description的li和类。除了委托处理程序之外，在课堂内没有任何内容被触发点击事件，隐藏或显示，切换等。

<ul>
        <li>
            <a data-description="data-description" data-largesrc="~/Content/example/gallery/intro_img4.jpg" data-title="Project Name 1" href="#"><img alt="" src="~/Content/example/gallery/intro_img4.jpg"></a>
    <div class="portfolio_description">
        <div class="block">
            <div class="container">
                <h2>Simple Collapsible</h2>


                <p>Click on the button to toggle between showing and hiding content.</p>
                <button class="btn btn-info" data-target="#demo" data-toggle="collapse" type="button">Simple collapsible</button>

                <div class="collapse" id="demo">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
            </div>
        </div>
    </div>

    </li>
    </ul>

这是一个plunker演示。

https://plnkr.co/edit/XY7A3D3YO7hoF8AulZpR?p=preview

输出：

收集问题：

删除课程组合描述之前和之后：

Answer 1

由于手风琴元素的ID存在冲突，请使用唯一ID更新您的代码。

“portfolio_description”和“gallery-expander”DIV中存在相同的ID。

更新：

请用下面的

更新你的grid.js

/*
* debouncedresize: special jQuery event that happens once after a window resize
*
* latest version and complete README available on Github:
* https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js
*
* Copyright 2011 @louis_remi
* Licensed under the MIT license.
*/
var $event = $.event,
$special,
resizeTimeout,
previousItem,
accordionHTML;

$special = $event.special.debouncedresize = {
    setup: function() {
        $( this ).on( "resize", $special.handler );
    },
    teardown: function() {
        $( this ).off( "resize", $special.handler );
    },
    handler: function( event, execAsap ) {
        // Save the context
        var context = this,
            args = arguments,
            dispatch = function() {
                // set correct event type
                event.type = "debouncedresize";
                $event.dispatch.apply( context, args );
            };

        if ( resizeTimeout ) {
            clearTimeout( resizeTimeout );
        }

        execAsap ?
            dispatch() :
            resizeTimeout = setTimeout( dispatch, $special.threshold );
    },
    threshold: 250
};

// ======================= imagesLoaded Plugin ===============================
// https://github.com/desandro/imagesloaded

// $('#my-container').imagesLoaded(myFunction)
// execute a callback when all images have loaded.
// needed because .load() doesn't work on cached images

// callback function gets image collection as argument
//  this is the container

// original: MIT license. Paul Irish. 2010.
// contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou

// blank image data-uri bypasses webkit log warning (thx doug jones)
var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';

$.fn.imagesLoaded = function( callback ) {
    var $this = this,
        deferred = $.isFunction($.Deferred) ? $.Deferred() : 0,
        hasNotify = $.isFunction(deferred.notify),
        $images = $this.find('img').add( $this.filter('img') ),
        loaded = [],
        proper = [],
        broken = [];

    // Register deferred callbacks
    if ($.isPlainObject(callback)) {
        $.each(callback, function (key, value) {
            if (key === 'callback') {
                callback = value;
            } else if (deferred) {
                deferred[key](value);
            }
        });
    }

    function doneLoading() {
        var $proper = $(proper),
            $broken = $(broken);

        if ( deferred ) {
            if ( broken.length ) {
                deferred.reject( $images, $proper, $broken );
            } else {
                deferred.resolve( $images );
            }
        }

        if ( $.isFunction( callback ) ) {
            callback.call( $this, $images, $proper, $broken );
        }
    }

    function imgLoaded( img, isBroken ) {
        // don't proceed if BLANK image, or image is already loaded
        if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) {
            return;
        }

        // store element in loaded images array
        loaded.push( img );

        // keep track of broken and properly loaded images
        if ( isBroken ) {
            broken.push( img );
        } else {
            proper.push( img );
        }

        // cache image and its state for future calls
        $.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } );

        // trigger deferred progress method if present
        if ( hasNotify ) {
            deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] );
        }

        // call doneLoading and clean listeners if all images are loaded
        if ( $images.length === loaded.length ){
            setTimeout( doneLoading );
            $images.unbind( '.imagesLoaded' );
        }
    }

    // if no images, trigger immediately
    if ( !$images.length ) {
        doneLoading();
    } else {
        $images.bind( 'load.imagesLoaded error.imagesLoaded', function( event ){
            // trigger imgLoaded
            imgLoaded( event.target, event.type === 'error' );
        }).each( function( i, el ) {
            var src = el.src;

            // find out if this image has been already checked for status
            // if it was, and src has not changed, call imgLoaded on it
            var cached = $.data( el, 'imagesLoaded' );
            if ( cached && cached.src === src ) {
                imgLoaded( el, cached.isBroken );
                return;
            }

            // if complete is true and browser supports natural sizes, try
            // to check for image status manually
            if ( el.complete && el.naturalWidth !== undefined ) {
                imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 );
                return;
            }

            // cached images don't fire load sometimes, so we reset src, but only when
            // dealing with IE, or image is complete (loaded) and failed manual check
            // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
            if ( el.readyState || el.complete ) {
                el.src = BLANK;
                el.src = src;
            }
        });
    }

    return deferred ? deferred.promise( $this ) : $this;
};

var Grid = (function() {

        // list of items
    var $grid = $( '#gallery-grid' ),
        // the items
        $items = $grid.children( 'li' ),
        // current expanded item's index
        current = -1,
        // position (top) of the expanded item
        // used to know if the preview will expand in a different row
        previewPos = -1,
        // extra amount of pixels to scroll the window
        scrollExtra = 0,
        // extra margin when expanded (between preview overlay and the next items)
        marginExpanded = 10,
        $window = $( window ), winsize,
        $body = $( 'html, body' ),
        // transitionend events
        transEndEventNames = {
            'WebkitTransition' : 'webkitTransitionEnd',
            'MozTransition' : 'transitionend',
            'OTransition' : 'oTransitionEnd',
            'msTransition' : 'MSTransitionEnd',
            'transition' : 'transitionend'
        },
        transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
        // support for csstransitions
        support = Modernizr.csstransitions,
        // default settings
        settings = {
            minHeight : 500,
            speed : 350,
            easing : 'ease'
        };

    function init( config ) {

        // the settings..
        settings = $.extend( true, {}, settings, config );

        // preload all images
        $grid.imagesLoaded( function() {

            // save item´s size and offset
            saveItemInfo( true );
            // get window´s size
            getWinSize();
            // initialize some events
            initEvents();

        } );

    }

    // add more items to the grid.
    // the new items need to appended to the grid.
    // after that call Grid.addItems(theItems);
    function addItems( $newitems ) {

        $items = $items.add( $newitems );

        $newitems.each( function() {
            var $item = $( this );
            $item.data( {
                offsetTop : $item.offset().top,
                height : $item.height()
            } );
        } );

        initItemsEvents( $newitems );

    }

    // saves the item´s offset top and height (if saveheight is true)
    function saveItemInfo( saveheight ) {
        $items.each( function() {
            var $item = $( this );
            $item.data( 'offsetTop', $item.offset().top );
            if( saveheight ) {
                $item.data( 'height', $item.height() );
            }
        } );
    }

    function initEvents() {

        // when clicking an item, show the preview with the item´s info and large image.
        // close the item if already expanded.
        // also close if clicking on the item´s cross
        initItemsEvents( $items );

        // on window resize get the window´s size again
        // reset some values..
        $window.on( 'debouncedresize', function() {

            scrollExtra = 0;
            previewPos = -1;
            // save item´s offset
            saveItemInfo();
            getWinSize();
            var preview = $.data( this, 'preview' );
            if( typeof preview != 'undefined' ) {
                hidePreview();
            }

        } );

    }

    function initItemsEvents( $items ) {
        $items.on( 'click', 'span.gallery-close', function() {
            hidePreview();
            return false;
        } ).children( 'a' ).on( 'click', function(e) {

            var $item = $( this ).parent();
            // check if item already opened
            current === $item.index() ? hidePreview() : showPreview( $item );
            return false;

        } );
    }

    function getWinSize() {
        winsize = { width : $window.width(), height : $window.height() };
    }

    function showPreview( $item ) {

        var preview = $.data( this, 'preview' ),
            // item´s offset top
            position = $item.data( 'offsetTop' );

        scrollExtra = 0;

        // if a preview exists and previewPos is different (different row) from item´s top then close it
        if( typeof preview != 'undefined' ) {

            // not in the same row
            if( previewPos !== position ) {
                // if position > previewPos then we need to take te current preview´s height in consideration when scrolling the window
                if( position > previewPos ) {
                    scrollExtra = preview.height;
                }
                hidePreview();
            }
            // same row
            else {
                preview.update( $item );
                return false;
            }

        }

        // update previewPos
        previewPos = position;
        // initialize new preview for the clicked item
        preview = $.data( this, 'preview', new Preview( $item ) );
        // expand preview overlay
        preview.open();

    }

    function hidePreview() {
        current = -1;
        var preview = $.data( this, 'preview' );
        preview.close();
        $.removeData( this, 'preview' );
    }

    // the preview obj / overlay
    function Preview( $item ) {
        this.$item = $item;
        this.expandedIdx = this.$item.index();
        this.create();
        this.update();
    }

    Preview.prototype = {
        create : function() {
            if(typeof previousItem != 'undefined' || previousItem){
              previousItem.append('<div class="portfolio_description">'+accordionHTML+'</div>')
            }
            // create Preview structure:
            //this.$title = $( '<h3></h3>' );
            this.$description = $( '<div></div>' );
            //this.$href = $( '<a href="#">Visit website</a>' );
            //this.$details = $( '<div class="gallery-details"></div>' ).append( this.$title, this.$description, this.$href );
            this.$details = $( '<div class="gallery-details"></div>' ).append( this.$description );
            //console.log(this);
            this.$loading = $( '<div class="gallery-loading"></div>' );
            this.$fullimage = $( '<div class="gallery-fullimg"></div>' ).append( this.$loading );
            this.$closePreview = $( '<span class="gallery-close"></span>' );
            this.$previewInner = $( '<div class="gallery-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details );
            this.$previewEl = $( '<div class="gallery-expander"></div>' ).append( this.$previewInner );
            // append preview element to the item
            this.$item.append( this.getEl() );
            // set the transitions for the preview and the item
            if( support ) {
                this.setTransition();
            }
        },
        update : function( $item ) {
           if(typeof previousItem != 'undefined' || previousItem){
              previousItem.append('<div class="portfolio_description">'+accordionHTML+'</div>')
            }
            if( $item ) {
                this.$item = $item;
            }

            // if already expanded remove class "gallery-expanded" from current item and add it to new item
            if( current !== -1 ) {
                var $currentItem = $items.eq( current );
                $currentItem.removeClass( 'gallery-expanded' );
                this.$item.addClass( 'gallery-expanded' );
                // position the preview correctly
                this.positionPreview();
            }

            // update current value
            current = this.$item.index();

            // update preview's content
            var $itemEl = this.$item.children( 'a' ),
                eldata = {
                    // href : $itemEl.attr( 'href' ),
                    // largesrc : $itemEl.data( 'largesrc' ),
                    largesrc : $itemEl.find('img').attr('src'),
                    // title : $itemEl.data( 'title' ),
                    // description : $itemEl.data( 'description' ),
                    description : $itemEl.parent().find('.portfolio_description').html()
                    //description : 'test'
                };

            //this.$title.html( eldata.title );
            this.$description.html( eldata.description );
            accordionHTML =eldata.description; 
            previousItem = this.$item;
            this.$item.children( 'a' ).parent().find('.portfolio_description').remove();

            //this.$href.attr( 'href', eldata.href );

            var self = this;

            // remove the current image in the preview
            if( typeof self.$largeImg != 'undefined' ) {
                self.$largeImg.remove();
            }

            // preload large image and add it to the preview
            // for smaller screens we don´t display the large image (the media query will hide the fullimage wrapper)
            if( self.$fullimage.is( ':visible' ) ) {
                this.$loading.show();
                $( '<img/>' ).load( function() {
                    var $img = $( this );
                    if( $img.attr( 'src' ) === self.$item.children('a').data( 'largesrc' ) ) {
                        self.$loading.hide();
                        self.$fullimage.find( 'img' ).remove();
                        self.$largeImg = $img.fadeIn( 350 );
                        self.$fullimage.append( self.$largeImg );
                    }
                } ).attr( 'src', eldata.largesrc ); 
            }

        },
        open : function() {

            setTimeout( $.proxy( function() {   
                // set the height for the preview and the item
                this.setHeights();
                // scroll to position the preview in the right place
                this.positionPreview();
            }, this ), 25 );

        },
        close : function() {

            var self = this,
                onEndFn = function() {
                    if( support ) {
                        $( this ).off( transEndEventName );
                    }
                    self.$item.removeClass( 'gallery-expanded' );
                    self.$previewEl.remove();
                    self.$item.append('<div id="ss" class="portfolio_description">'+accordionHTML+'</div>')

                };

            setTimeout( $.proxy( function() {

                if( typeof this.$largeImg !== 'undefined' ) {
                    this.$largeImg.fadeOut( 'fast' );
                }
                this.$previewEl.css( 'height', 0 );
                // the current expanded item (might be different from this.$item)
                var $expandedItem = $items.eq( this.expandedIdx );
                $expandedItem.css( 'height', $expandedItem.data( 'height' ) ).on( transEndEventName, onEndFn );

                if( !support ) {
                    onEndFn.call();
                }

            }, this ), 25 );

            return false;

        },
        calcHeight : function() {

            var heightPreview = winsize.height - this.$item.data( 'height' ) - marginExpanded,
                itemHeight = winsize.height;

            if( heightPreview < settings.minHeight ) {
                heightPreview = settings.minHeight;
                itemHeight = settings.minHeight + this.$item.data( 'height' ) + marginExpanded;
            }

            this.height = heightPreview;
            this.itemHeight = itemHeight;

        },
        setHeights : function() {

            var self = this,
                onEndFn = function() {
                    if( support ) {
                        self.$item.off( transEndEventName );
                    }
                    self.$item.addClass( 'gallery-expanded' );
                };

            this.calcHeight();
            this.$previewEl.css( 'height', this.height );
            this.$item.css( 'height', this.itemHeight ).on( transEndEventName, onEndFn );

            if( !support ) {
                onEndFn.call();
            }

        },
        positionPreview : function() {

            // scroll page
            // case 1 : preview height + item height fits in window´s height
            // case 2 : preview height + item height does not fit in window´s height and preview height is smaller than window´s height
            // case 3 : preview height + item height does not fit in window´s height and preview height is bigger than window´s height
            var position = this.$item.data( 'offsetTop' ),
                previewOffsetT = this.$previewEl.offset().top - scrollExtra,
                scrollVal = this.height + this.$item.data( 'height' ) + marginExpanded <= winsize.height ? position : this.height < winsize.height ? previewOffsetT - ( winsize.height - this.height ) : previewOffsetT;

            $body.animate( { scrollTop : scrollVal }, settings.speed );

        },
        setTransition  : function() {
            this.$previewEl.css( 'transition', 'height ' + settings.speed + 'ms ' + settings.easing );
            this.$item.css( 'transition', 'height ' + settings.speed + 'ms ' + settings.easing );
        },
        getEl : function() {
            return this.$previewEl;
        }
    }

    return { 
        init : init,
        addItems : addItems
    };

})();