2

So I have the following function running and it works great. The selected div expands with the .slideToggle() function and the page slides down the body with the .animate() and .scrollTop() methods.

$('.pfitem').click(function(){
        $(this).toggleClass('minimized maximized');
        $(this).next().toggleClass('minimized maximized');
        $(this).next().slideToggle(1200);            
        });

$('.pfitem.minimized').click(function(){
        $('html, body').animate({
        scrollTop: $(this).next().offset().top
        }, 1200);            
        });

Now when I try to add this following code which from my understanding should slide the page back up to the div with an id of #portfolio it does nothing even though that now the class of the div that is targeted by the .click() function has been toggled to .pfitem.maximized, so the previous .click() function should not interfere.

$(".pfitem.maximized").click(function() {
        $('html, body').animate({
        scrollTop: $('#portfolio').offset().top
        }, 1200);
});

This is a snippet of my HTML, I have tried to strip it of irrelevant information (I am using bootstrap and have left some bootstrap classes in the code)

<div class="page" id="portfolio">
    <div class="content container">
      
        <ul class="row npr">
            <li class="container col-xs-12 col-sm-4 col-md-3 pfitem businesscards minimized">
                <div class="orangeover">
                    <span>Business Cards</span>
                </div>
            </li>
          
            <div class="container col-xs-12 maximizeitem minimized" id="businesscards">
                <div class="maxicontent col-sm-4">
                    <h4>BUSINESS CARDS</h4>
                        <p>Some text goes here</p>
                        <p>Some text goes here</p>
                </div><!-- maxicontent -->
                <div class="maxiimages col-sm-8">
                    <button class="close"><span class="">X</span></button>
                    <img src="" class="">
                </div><!-- maxiimages -->
            </div><!-- container maximizeitem -->
        </ul>
      
    </div><!-- .content .container -->
</div><!-- #portfolio -->

This is my first post, I hope I have provided sufficient information.

Thanks

Vinko
  • 181
  • 1
  • 1
  • 6

1 Answers1

1

Since you want the selectors to be evaluated dynamically you will have to use event delegation

$(document).on('click', '.pfitem', function () {
    $(this).toggleClass('minimized maximized');
    $(this).next().toggleClass('minimized maximized');
    $(this).next().slideToggle(1200);
});

$(document).on('click', '.pfitem.minimized', function () {
    $('html, body').animate({
        scrollTop: $(this).next().offset().top
    }, 1200);
});
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
  • might also be a good idea to include e.stopPropogation() to keep the event from bubbling up to the first click listener? – deowk Apr 28 '15 at 09:54
  • @deolectrix since we are binding the handler to document object.. there is no use of preventing the propogation – Arun P Johny Apr 28 '15 at 09:56
  • Thank you Arun! this solved my problem. I urge anyone that is having a similar issue has a read through [this thread](http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click) which explains the difference between onclick and click – Vinko Apr 28 '15 at 15:18