• jQuery Event Handling

    jQuery Event Handling

    We will build a Simple example to add jQuery Event Handling Functionality to HTML Menu. jQuery is a development framework that allows us to use JavaScript in our PHP document.

    Before we can begin, we need to include the latest jQuery library. We can download it from the download section at www.jquery.com. We will save it our JavaScript folder named “js”, in the root of our PHP project.

    jQuery Event Handling Program Code

    Example:

    jQuery Event Handling Example

    jQuery Event Handling Example

    Now, we can start coding our “index.php” page. We will place it in the project folder.

    The most important part for jQuery functionality is to include our jQuery Library. Let’s place under <head> element. This will allow the HTML of a page to load first.

    The main idea of our script is to find each hyperlink <a> in the document, prevent its default functionality, and display the hyperlink content in alert() message. In page HTML part contains a “navigation” element for the dynamic content.

    After loading our PHP page and when the document is ready, we can define our JavaScript scripts in the $(document).ready() function.

    <head><title>Vakratund Computers</title>

    <script src=”js/jquery-1.11.3.js” type=”text/javascript”></script>

    <script>

    $(document).ready(function(){

    $(‘#navigation li a’).each(function(){

    var $item = $(this);

    $item.bind(‘click’, function(event){

    event.preventDefault();

    var title = $item.html();

    var html = title + ‘ was selected.’;

    alert(html);

    });

    });

    });

    </script>

    </head>

     

    <div class=”menu”><ul id=”navigation”>

    <li class=”active”><a href=”index.php”>Home</a></li>

    <li><a href=”#”>Services</a></li>

    <li><a href=”#”>Team</a></li>

    <li><a href=”#”>Blog</a></li>

    <li><a href=”#”>Contact</a></li>

    <div class=”clear”></div>

    </ul>

    </div>

    Appreciate my work :Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on StumbleUponShare on TumblrDigg thisShare on YummlyShare on VKFlattr the authorBuffer this page

Leave a Reply

Your email address will not be published. Required fields are marked *