javascript - jQuery working on second click only - Stack Overflow

admin管理员组

文章数量:1344322

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');
    }); 
});

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');
    }); 
});

• javascript
• jquery

Share Follow edited Jan 7, 2014 at 18:16 talemyn 7,97044 gold badges3333 silver badges5252 bronze badges asked Jan 7, 2014 at 18:13 Karthik MallaKarthik Malla 5,8201414 gold badges5151 silver badges9191 bronze badges 3

• 4 Works for me -> jsfiddle/3zEX5 – adeneo Commented Jan 7, 2014 at 18:14
• is this jQuery ui slider? – Nouphal.M Commented Jan 7, 2014 at 18:14
• 2 There's probably something interfering with the click event, like another click event. – bjb568 Commented Jan 7, 2014 at 18:16

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Hmm... have you tried to prevent the default anchor behavior? http://jsbin./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...

add: return false; to your mand

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

Have you tried to void the href attribute?

$(document).ready(function(){

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

        alert('test');

    }); 

});

Try this:

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

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

UPDATE: I think you are clicking on the div first and then the anchor tag es 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

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')
  })
}, [])

本文标签： javascriptjQuery working on second click onlyStack Overflow