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>
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/
You are missing the # from the selector
$("#myButtonID").click(function(){
forgot the # in your selector:
<script>
$(document).ready(function(){
$("#myButtonID").click(function(){
$("p").hide();
});
});
</script>
You're missing the hash character used to signify your selecting by an elements id.
$("#myButtonID").click(function(){
$("p").hide();
});
