CODEWITHSUNDEEP
javascriptjquery
Karthik Malla
Karthik Malla

Reputation: 5800

jQuery working on second click only

Can anyone point the issue why I am unable to get the alert popup on first click? It works only every second click (i.e. 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');
    }); 
});

Upvotes: 5

Views: 7934

Answers (5)

Francine Knight
Francine Knight

Reputation: 1

If you are using react.js then you can use a useEffect hook.

import 'useEffect' from 'react'

useEffect(() => {
  $("a.ui-slider-handle").on('click', function() {
    alert('test')
  })
}, [])

Upvotes: 0

Manuel
Manuel

Reputation: 31

add: return false; to your command

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

Upvotes: 3

Susheel Singh
Susheel Singh

Reputation: 3854

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 i.e 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

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206008

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...

Upvotes: 3

axiom82
axiom82

Reputation: 632

Have you tried to void the href attribute?

$(document).ready(function(){

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

        alert('test');

    }); 

});

Upvotes: 0

Related Questions