Saturday, 27 July 2019

Binding button click event in jQuery

In jQuery, the method .click() can be used to handle a button's click event. However, this method doesn't work, if the button is dynamically loaded into the HTML document. In this post, we show you how to use the .on() method to handle this case.

The .click() method is for binding the click event to the existing elements in the HTML DOM (Doncument Object Model). If the elements are added dynamically, the .on() method should be used. It is for existing and future elements.

To show the demo, we can continue to use the source code in the previous post Dynamically Loading Pages in jQuery. Now, we only make some changes in two files: about.html and myscript.js.

In the file about.html, we add a button as below:

<div>  
    <h2>About</h2>
    <p>This is the demo for dynamically loading pages in jQuery.</p>
    <button class="btn btn-primary" type="submit" id="hello">Hello</button>
</div>

When the page about.html is loaded dynamically, it will show a Hello button.

At the bottom of the file myscript.js, add following code to bind the click event of the Hello button.

$(document).on("click", "#hello", function(e){
    alert("The hello button is clicked");
});

As shown in the code, in the .on() method, we define the "click" event, the button id "#hello" and the handler function function(e){ alert("The hello button is clicked");}. This will bind the click event to the Hello button when the user switches to the About page. If the Hello button is clicked, it will show the message "The hello button is clicked". The result is shown as the screenshot below.

About the elements that already exist in the HTML DOM, it is simple to use the .click() method. For example, in the navigation menu bar on top of the website, there is a search button. In the HTML file index.html, the search button is defined as <button class="btn btn-secondary my-2 my-sm-0" type="submit" id="search">Search</button>. Copy and paste the following code into the .ready() method's handler function in the javascript file myscript.js.

$("#search").click(function(){
    alert("The search button is clicked");
});

As shown in the screenshot below, it shows the message "The search button is clicked" when the search button is clicked.

The details of the file myscript.js are shown below:

$(document).ready(function(){ 

    var activeNavItem = localStorage.getItem("activeNavItem");
    if (activeNavItem) {
        if (activeNavItem != "home") {
            $("[data-page=home]").parent("li").removeClass("active");
            $("[data-page=" + activeNavItem + "]").parent("li").addClass("active");
        }

        $(".content").load(activeNavItem + ".html", "RN" + Math.random()*10000);

    } else {
        $(".content").load("home.html", "RN" + Math.random()*10000);
    }

    $(".navbar-nav a").on("click", function(){
        $(".navbar-nav").find("li.active").removeClass("active");
        $(this).parent("li").addClass("active");
        $(".content").load($(this).attr("data-page") + ".html", "RN" + Math.random()*10000);
        localStorage.setItem("activeNavItem", $(this).attr("data-page"));
    });

    $("#search").click(function(){
        alert("The search button is clicked");
    });

});

$(document).on("click", "#hello", function(e){
    alert("The hello button is clicked");
});