Articles → JQUERY → Adding Events To Html Elements Using Jquery

Adding Events To Html Elements Using Jquery






Adding Click Event In Anchor Tag


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Adding event in anchor tag demo</title>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
      $(document).ready(function() {
        $("a").click(function() {
          alert("Click and any anchor tag and this pop up will come");
        });
      });
    </script>
  </head>
  <body>
    <a href="http://www.google.com">google</a>
    <a href="http://www.rediff.com">Rediff</a>
    <a href="http://www.gyansangrah.com">gyansangrah</a>
  </body>
</html>

Try It




Adding Click Event To A Specific Anchor Tag


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Adding event to specific anchor tag demo</title>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
      $(document).ready(function() {
        $("a#googleLink").click(function() {
          alert("Click and any anchor tag and this pop up will come");
        });
      });
    </script>
  </head>
  <body>
    <a href="http://www.google.com" id="googleLink">google</a>
    <a href="http://www.rediff.com">Rediff</a>
    <a href="http://www.gyansangrah.com">gyansangrah</a>
  </body>
</html>

Try It




Adding Click Event On A Button


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Adding event to a button demo</title>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
      $(document).ready(function() {
        $("input").click(function() {
          alert("This alert will come when you click on button");
        });
      });
    </script>
  </head>
  <body>
    <input type="button" value="click me" />
  </body>
</html>

Try It




Adding A Click Event On Button Inside The Div


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Adding event to a button inside the div demo</title>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
      $(document).ready(function() {
        $("div input").click(function() {
          alert("This alert will come only when the button inside the div is clicked");
        });
      });
    </script>
  </head>
  <body>
    <div>
      <input type="button" value="Button inside the div" />
    </div>
    <input type="button" value="click me" />
  </body>
</html>

Try It





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Adding event to a button inside the div demo</title>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
      $(document).ready(function() {
        $("div#mainDiv input").click(function() {
          alert("This alert will come only when the button inside the mainDiv is clicked");
        });
      });
    </script>
  </head>
  <body>
    <div id="mainDiv">
      <input type="button" value="Button inside the  first div" />
    </div>
    <div>
      <input type="button" value="Button inside the second div" />
    </div>
    <input type="button" value="click me" />
  </body>
</html>

Try It



<li>
  <ul>
    <input type="button" value="List option 1" />
  </ul>
  <ul>
    <input type="button" value="List option 2" />
  </ul>
  <ul>
    <input type="button" value="List option 3" />
  </ul>
</li>





Posted By  -  Karan Gupta
 
Posted On  -  Friday, November 4, 2011

Query/Feedback


Your Email Id
 
Subject
 
Query/FeedbackCharacters remaining 250