Multiple event listeners on a single button

Question

Multiple event listeners on a single button

I'm working on implementing GATracking for a group of pages. I want to track both pageloads and clicks on specific buttons. My goal is to create code that is easily adaptable without the need for extensive rework. Some functions already have bindings, so using multiple bindings in jQuery is not ideal. Additionally, I prefer not to use inline function calls.

One approach I'm considering is creating an array based on IDs and fetching values when needed. Alternatively, I could explicitly call functions on buttons or divs with href attributes, triggering a separate function once the binding is complete.

I'm seeking a more universal solution that centralizes most of the coding in a single class for versatility across various applications. How should I proceed?

For example:

1)

<div id="submit" class="submitClass">

(onClick binding already exists and adding multiple bindings in jQuery is discouraged).

2)

<li><a href="/" onclick='GATracking(<param1>,<param2>);'>Home</a></li>

(repeating this pattern for different functions would be tedious and lack generality)

Thank you in advance

javascript jquery html css

Answer 1

Answer №1

Add arguments to each occasion

<div id="submit" class="submitStyle">

Utilizing jQuery

let counter = 0;
$("#submit").on("click", function(){
  if(counter == 1){
    //Implement specific action for first click
  } else if(counter == 2){
    //Execute different action on second click
  } else if(counter == 3){
    //Another action for third click
  } else {
    //Default action for any other click count
  }
  counter+=1;
});

Answer 2

Add arguments to each occasion

<div id="submit" class="submitStyle">

Utilizing jQuery

let counter = 0;
$("#submit").on("click", function(){
  if(counter == 1){
    //Implement specific action for first click
  } else if(counter == 2){
    //Execute different action on second click
  } else if(counter == 3){
    //Another action for third click
  } else {
    //Default action for any other click count
  }
  counter+=1;
});

Multiple event listeners on a single button

Answer №1

Similar questions

Error: The checkbox property 'checked' is read-only and cannot be assigned to

At what point should I expect a promise in Protractor to be resolved?

The sidebar stays fixed in place and doesn't adapt to varying screen resolutions

Looking to Query in Angular with Firebase?

Utilizing CSS to create a dynamic full-screen background slider for a static website

Change the left position of the sliding menu in real-time

Showing a temporary marker while utilizing jQuery UI sortable container

Is it possible to integrate Firebase Storage into a TypeScript/HTML/CSS project without the use of Angular or React?

Encountered an unexpected symbol < in JSON while implementing fetch() operation

Videos embedded using the React HTML video tag are not automatically playing on mobile devices

Hiding or removing DOM elements with ng-bootstrap pagination

Oops! We encountered an issue in locating the Entry Module. The error message is indicating that it cannot find the specified source file

Using NodeJS to Load jQuery

Update the date format in jQuery's datepicker

The requested resource at http://127.0.0.1:8000/storage/profiles/ could not be located (Error 404: Not

Struggling to align an image in the center of a div on top of another image

Exploring ways to personalize the behavior and style of the material-ui Accordion component

Utilizing the input type file within an anchor tag to create a dropdown item

Guide to utilizing multiple forms in Django version 2.1

In Visual Studio, make sure to include a reference to AngularJS.min.js within another JavaScript file