How can I get button events in the following code?

Question

I am new to jQuery and I don't know how to get events when we press the button on the following code. Please help me.

<div class="key">
    <div class="buttonWrapper">    
        <span data-i18n="keypad.one" class="button i18n"></span>
    </div>
</div>

Answer 1

First you want to capture what element you want to use, using $(). So in your case:

$(".button")

Then after you have gotten your element using $() you want to bind a event to it. In your case the .click() event:

$(".button").click(function(){
   // Insert what you want to happen when someone clicks the button here
});

To learn more about jQuery, I strongly recommend looking at their API. For more information about the .click() event click here. To learn more about events in general click here.

Answer 2

Use something like click function if it is statically loaded:

// Wait till the page is loaded and then do the following...
$(document).ready(function () {
  // Attach a click handler on the element with the class button.
  $(".button").click(function () {
    // The code to be executed when the button is clicked.
    alert("Hi");
  });
});

Or, if it is dynamic in nature, find a static parent and delegate the event:

// Wait till the page is loaded and then do the following...
$(document).ready(function () {
  $("body").on("click", ".button", function () {
    // The code to be executed when the button is clicked.
    alert("Hi");
  });
});

Please refer:

• jQuery API $.on()
• jQuery API $.click()