SlideUp schließen Knopf in erweitertem div reagiert nicht

Question

Ich war auf der Suche nach einer erweiterbaren Portfolio-Lösung in jquery und stieß auf eine fiddle, die ich mochte, bis auf eine Schließen-Schaltfläche für den erweiterten Abschnitt fehlt. Also habe ich versucht, eine Schaltfläche mit einer einfachen SlideUp() jquery Funktion in einem aktualisierten fiddle hinzufügen, aber die Schaltfläche funktioniert einfach nicht. Das Merkwürdigste daran ist, dass ich versucht habe, den gleichen Knopf außerhalb des Divs zu platzieren und dort funktioniert es wie ein Zauber. Ich habe auch versucht und gescheitert, das Problem zu beheben, indem ich die close-Funktionslogik mit this() und parent() für die Schaltfläche, die sich innerhalb des expandierten Elements befindet, ändere.

Markup:

 <div id="portfolio"> 
<a class="close"> close </a> 
<div class="row"> 
    <div class="item" data-rel="0">1</div> 
    <div class="item" data-rel="1">2</div> 
    <div class="item" data-rel="2">3</div> 
</div> 
<div class="details"></div> 
<div class="row"> 
    <div class="item" data-rel="3">4</div> 
    <div class="item" data-rel="4">5</div> 
    <div class="item" data-rel="5">6</div> 
</div> 
<div class="details"></div> 
<ul id="portfolio-details"> 
    <li> 
    <a class="close"> close </a> 
    <p>Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</p> 
    </li> 
    <li>Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</li> 
    <li>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</li> 
    <li>Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</li> 
    <li>Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</li> 
    <li>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</li> 
</ul> 

JQuery:

var Portfolio = { 
Elements: { 

    items: $('div.item', '#portfolio'), 
    details: $('#portfolio-details', '#portfolio') 

}, 

fn: { 

    select: function() { 

     Portfolio.Elements.items.each(function() { 

      var $item = $(this); 
      var $row = $item.parent(); 
      var $details = $row.next('div.details'); 
      var $li = $('li', Portfolio.Elements.details); 
      var $close = $('.close'); 


      $item.click(function() { 

       $('div.details').hide(); 
       $details.empty(); 
       var $html = $li.eq($item.data('rel')).html(); 
       $details.html($html).slideDown(600); 
       $('html, body').animate({ 
        scrollTop: 0 
       }, 0).animate({ 
        scrollTop: $details.offset().top 
       }, 300); 

      }); 
      $close.click(function() { 
        $details.slideUp(); 
      }); 
     }); 
    } 
} 
}; 

Portfolio.fn.select(); 

Answer 1

Versuchen Sie, die Bindung von Klickfunktion auf $('.close')

$('.portfolio').on('click', '.close', function() { 
    $details.slideUp(); 
}) 

Hoffnung zu ändern, das hilft . Nicht sicher, obwohl!