Question

I have this function:

$(document).ready(function() {

    $('.UIDropDown').click(function () {

        $('.button', this).click(function(e){ e.preventDefault()});

        $(this).addClass('active');


    });

});

And the following html:

<div class="UIDropDown">

    <a href="" class="button">button link</a>

    <ul class="submenu">
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
    </ul>

</div>

Why is the e.preventDefault() not working on the .button? The page still refreshes .

Thx,

Answer 1

Because you bind the event handler after the event has actually ocurred, and it doesn’t get executed. Bind the event handler to the element in the DOM ready event handler:

$(document).ready(function() {
    // Bind event handler to the button
    $('.UIDropDown .button').click(function(e) { 
        e.preventDefault(); 
    });
    // Bind event handler to the div (click on .button will trigger both)
    $('.UIDropDown').click(function () {
        $(this).addClass('active');
    });
});​

Here’s a working example.