Hide a div when a link is clicked - PHP

Question

Im trying to make a div disappear anytime a link is clicked on php, this is my code

<?php
                  echo '<div id="content">
                          <table width="300">
                              <tr>
                                <td>
                               <a href="calendar.php" style="color: red" target="_top">'.$name.'</a>
                                 </td>
                               </tr>
                           </table> </div>';
     //when this is clicked, hide the 'content' div 
    echo '<a href="javascript:;" id="next">next</a>';

?>

this is my script code that is not doing anything for now

<script type="text/javascript">
$('#next').live("click",function(){
     $('#content').hide();
});
 </script>

How can I hide the <div id="content"> when the link 'next' is clicked? Any suggestion will help thanks!

Answer 1

Use this:

$(document).ready(function(){
    $('#next').on('click',function(){
        $('#content').hide();
    });
}

Demo: on function

But! As mentioned in comments, this can not work, if you have version < 1.7. on function had been added in 1.7 version of jQuery.

If you have jQuery version < 1.9 you can use live function.:

$(document).ready(function(){
    $('#next').live('click',function(){
         $('#content').hide();
    });
}

Demo: live function

This function deprecated since 1.7 and it was removed in 1.9.

If you using jQuery < 1.7, you can use live function, but if not, you should use on , since live is deprecated.

Answer 2

put your script in document ready

$(function() {
 $('#next').live("click",function(){
      $('#content').hide();
 });
})

read more about it here: http://api.jquery.com/ready/

Answer 3

Try this

<script>
    $(document).ready(function(){
        $(document).on("click","#next", function(){
            $("#content").hide();
        });
    });
</script>

using $(document).ready(function(){ will avoid error in IE 8.