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

首頁 >

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
主站蜘蛛池模板： 安龙县| 巴东县| 卢龙县| 新丰县| 抚顺市| 监利县| 惠水县| 阿瓦提县| 新昌县| 额尔古纳市| 利津县| 杭锦旗| 贵南县| 乐山市| 新昌县| 晋州市| 封开县| 云安县| 滦平县| 义马市| 雅安市| 许昌市| 定结县| 彰化县| 巴林左旗| 拉萨市| 藁城市| 杂多县| 弥勒县| 韩城市| 望奎县| 庄河市| 台北市| 高要市| 连平县| 印江| 河南省| 元阳县| 铜陵市| 芜湖县| 蒲江县|