jQuery working on second click only

Question

Can anyone point the issue why I am unable to get the alert popup on first click? It works only every second click (ie doesn't work on odd number click and works on even number click).

HTML:

<div class="slider">
    <div class="slider-box ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
        <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 50%;"></a>
    </div>
</div>

jQuery:

$(document).ready(function() {
    $("a.ui-slider-handle").click(function() {
        alert('test');
    }); 
});

I also tried but didn't work

$(document).ready(function() {
    $("a.ui-slider-handle").mousedown(function() {
        alert('test');
    }); 
});

Answer 1

Hmm... have you tried to prevent the default anchor behavior? http://jsbin.com/IfirEBOj/2/edit

$("a.ui-slider-handle").click(function( event ) {
    event.preventDefault();
    alert('test');
}); 

In any case you should get familiar with some debugging tool and see what errors it throws. If any...

Answer 2

add: return false; to your command

$(document).ready(function() {
    $("a.ui-slider-handle").click(function() {
        alert('test');
return false;
    }); 
});

Answer 3

Have you tried to void the href attribute?

$(document).ready(function(){

    $("a.ui-slider-handle").attr('href', 'javascript:void(0)').click(function(){

        alert('test');

    }); 

});

Answer 4

Try this:

<div id="slider"></div>
$(document).ready(function () {
    $("#slider" ).slider();
    $("#slider").on('click','a',function () {
        alert('test');
    });
});

check the fiddle: http://jsfiddle.net/3zEX5/2/

UPDATE: I think you are clicking on the div first and then the anchor tag comes near it ie the small slider button. so you are feeling as it is working on odd click, if you can clearly tell you requirment then we can suggest you some way