CODEWITHSUNDEEP
jqueryjquery-ui
user2675939
user2675939

Reputation: 371

jQuery click event doesn't work

I am trying to hide an element by using click event, but the click event doesn't trigger.

Here is the code:

 <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>  
 $(document).ready(function(){  
    $("#myButtonID").click(function(){  
        $("p").hide();  
    });  
 });  
</script> 


<p>Lorem Ipsum </p> 
<a href="#" id="myButtonID">Click Me</a>

Upvotes: 1

Views: 100

Answers (4)

jk.
jk.

Reputation: 14435

Your code works but it may be reloading the page. The //code.jquery.com will load in http or https depending on the protocol your page is using. Try:

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

$(document).ready(function(){  
    $("#myButtonID").click(function(e){ 
        //prevent default element action
        e.preventDefault();
        $("p").hide();  
    });  
 });

or, if you want to use a shorter ready function and speed up jQuery a bit with .on:

jQuery .on vs click handler speed test

$(function () {
    $("#myButtonID").on("click", function (e) {
        e.preventDefault();
        $("p").hide();
    });
});

fiddle: http://jsfiddle.net/k2ymF/1/

Upvotes: 2

Jon Miles
Jon Miles

Reputation: 9883

You're missing the hash character used to signify your selecting by an elements id.

$("#myButtonID").click(function(){  
        $("p").hide();  
    });

Upvotes: 0

Gert B.
Gert B.

Reputation: 2362

forgot the # in your selector:

<script>  
$(document).ready(function(){  
 $("#myButtonID").click(function(){  
    $("p").hide();  
});  
});  
</script>

Upvotes: 0

Cjmarkham
Cjmarkham

Reputation: 9681

You are missing the # from the selector

$("#myButtonID").click(function(){

Upvotes: 0

Related Questions