CODEWITHSUNDEEP
jqueryjquery-animatebindunbind
Tami
Tami

Reputation: 3471

unbind click, but keep eventPreventDefault();

I'm trying to us unbind a click on an animation until the animation finishes to keep overlapping animiations from happening. The unbind works fine, but of course, then the event.preventDefault stops working and my button/link becomes active again. I'm not sure how to work my way around this.

Shortened version of the code is:

$('a.Next').bind('click', SlideFwd);
function SlideFwd(e){
    e.preventDefault();
    $('a.Next').unbind();
    $('ul.GridviewList').animate({
        left: '-=800px'
        }, 'slow', function() {
        $('a.Next').bind('click', SlideFwd);    
    });
};

and the html is:

<div>

    <div class="SlideControl">
        <p class="Pages"><span class="ProdCountDisplay">#</span> of <span class="ProdCountTotal">10</span></p>
        <ul>
            <li><a class="Disabled button_Back Previous" href="#">Prev</a></li>
            <li><a class="button_Next Next" href="#">Next</a></li>
        </ul>
    </div>
    <ul class="GridviewList">
        <li class="ProdWrap">This is a slider space 1</li>
        <li class="ProdWrap"> This is a slider space 2</li>
        <li class="ProdWrap"> This is a slider space 3</li>
        <li class="ProdWrap"> This is a slider space 4</li>
        <li class="ProdWrap"> This is a slider space 5 </li>
        <li class="ProdWrap">This is a slider space 6 </li>
        <li class="ProdWrap"> This is a slider space 7</li>
        <li class="ProdWrap"> This is a slider space 8 </li>
        <li class="ProdWrap"> This is a slider space 9 </li>
        <li class="ProdWrap"> This is a slider space 10 </li>
    </ul> <!-- ul.Gridviewlist -->
</div>

A complete working version is here: http://iwrb.idleprattle.com/Slider.htm (only the next has the unbind/bind set up now)

I also tried taking the preventDefault outside the function SlideFwd, but it must unbind that too. I.E.

$('a.Next').click(function(){e.preventDefault();});

Upvotes: 1

Views: 1132

Answers (2)

James Montagne
James Montagne

Reputation: 78710

You could do this:

$('a.Next').bind('click', SlideFwd);

...

$('a.Next').unbind().bind('click',function(e){e.preventDefault();});

...

$('a.Next').unbind().bind('click', SlideFwd);

Upvotes: 3

Dr.Molle
Dr.Molle

Reputation: 117354

Why not removing the href-attribute from the link. It makes no use there, a cursor can be set via CSS, and if an a-element has no href, there's nothing to prevent from if no event-handler is attached.

Upvotes: 0

Related Questions