官术网_书友最值得收藏!

首頁 >

jQuery 2.0 Development Cookbook

Detecting button clicks

Clicking on website elements is a primary user interaction; therefore, detecting these clicks is a very fundamental aspect in creating interactive web applications. There are various ways in which jQuery developers can listen for certain button presses within their web page.

Getting ready

Using your favorite text editor or IDE, create a blank HTML page named recipe-1.html in an easily accessible location.

How to do it…

Create two buttons with click event handlers by performing the following steps:

  1. Add the following HTML code to recipe-1.html. Be sure to change the location of the jQuery library in the JavaScript file, pointing it to where the latest version of jQuery is downloaded on your computer. 
    <!DOCTYPE html>
<html>
<head>
    <title>Chapter 2 :: jQuery Events</title>
    <script src="jquery.min.js"></script>
    <script>

    </script>
</head>
<body>
    <button class="button1">Button 1</button>
    <button class="button2">Button 2</button>
</body>
</html>
  2. Within the script tags, add the following JavaScript code, which attaches click event handlers to both of the button elements: 
    $(function() {
    $('.button1').click(function(){
    alert("Button 1 clicked");
    });
    $('body').on("click", ".button2", function(){
    alert("Button 2 clicked");
    });
});
  3. Open recipe-1.html within a web page and click on either of the buttons. You will be presented with a different JavaScript alert for each button, demonstrating that the event handlers have been executed.

How it works…

We can use various selectors to select button elements and then attach event handlers to these elements. In the preceding example, we select the first button using its class name, .button1, and the second button using the class name .button2.

With each button selected via the $() method, we can choose a method for attaching a click event to our buttons. The .click() method, as shown in the following code snippet, is dedicated for this purpose. By passing a callback function as an argument, we can specify a set of commands to be executed once the buttons have been clicked.

$('.button1').click(function(){
  alert("Button 1 clicked");
});

The preceding code will display the specified alert once the first button has been clicked. The following code uses an alternative function, .on(), which also handles other event types:

$('body').on("click", ".button2", function(){
  alert("Button 2 clicked");
});

This method is a little different as we first select the container of our buttons and then specify the button identifier (that is, .button2).

There's more...

The .on() method has some additional benefits over .click() alongside the previously mentioned memory benefit. If any elements are added to the DOM dynamically after the .click() function has been called, they will not have a click event attached. If the .on() method is used, provided that the dynamically added elements are added within the specified container, they will be caught by the click event handler. Consider the following code as an example of this situation:

<!DOCTYPE html>
<html>
<head>
    <title>Chapter 2 :: jQuery Events</title>
    <script src="jquery.min.js"></script>
    <script>
        $(function(){
            $('.button1').click(function(){
                alert("Button 1 clicked");
            });
            $('body').on("click", ".button2", function(){
                alert("Button 2 clicked");
            });
            setTimeout(function(){
                $('.additional').append("<button class='button1'>Button 1 again</button>");
                $('.additional').append("<button class='button2'>Button 2 again</button>");
            }, 2000);
        });
    </script>
</head>
<body>
<button class="button1">Button 1</button>
<button class="button2">Button 2</button>
<div class="additional"></div>
</body>
</html>

This code will attach an event handler to each of the buttons on page load using the .click() and .on() methods, respectively. Then, using the setTimeout() function, it will dynamically add two more buttons to the DOM; one button with the .button1 class and the other with the .button2 class. If you open this web page in a browser and wait for the second set of buttons to be created and then click on the additional Button 1 button, no click event will be fired. Click on the additional Button 2 button, and you will see the alert box being fired as desired.

See also

  • Detecting element clicks
  • Detecting key press events on inputs
主站蜘蛛池模板： 彰武县| 洞头县| 吉水县| 神木县| 丰都县| 马尔康县| 新河县| 浦东新区| 始兴县| 蒙山县| 垫江县| 都江堰市| 昭苏县| 张家川| 锦州市| 荆州市| 德令哈市| 台前县| 建始县| 德兴市| 苏尼特右旗| 扶绥县| 石景山区| 南皮县| 星子县| 大埔区| 海原县| 麟游县| 木里| 祁连县| 剑川县| 忻城县| 梅河口市| 富川| 咸丰县| 横山县| 内黄县| 东海县| 财经| 比如县| 原平市|