bootstrap accordian или hide и Show не работает в динамических элементах создания в jquery

Question

В одном из моих примерных приложений, когда вы нажимаете отдельные элементы, он покажет всплывающее окно с описанием конкретных элементов. Когда я попытался установить bootstarp accordion или hide и ничего не работает здесь, кроме обработчиков событий делегата jquery.

В grid.js является сторонним плагином, обеспечивающим создание динамического элемента.

Это ли и класс с именем portfolio_description. Внутри класса ничего не запускается событие щелчка, скрыть или показать, переключить и т. Д., Кроме обработчика делегата.

<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> 

Настоящая демоверсия плункера.

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

выход:

проблема с коллекцией:

До и после удаления CLAS S Описание портфеля:

Answer 1

из-за противоречивого идентификатора для элементов аккордеона. Обновите свой код с помощью уникального идентификатора.

Одинаковый идентификатор существует в "portfolio_description" AND "gallery-expander" DIV.

Обновлено:

Пожалуйста, обновите 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 
    }; 

})();