Same click event for multiple elements, specific case

Question

I don't want to repeat my code so I am trying to figure out how to work with a click event on multiple elements:

$(document).ready(function() {
    var realStateBtn = $('#real-estate-center').parent();
    var link = $('#real-estate-center > .linkwidth');
    realStateBtn.css('zIndex', 9999);
    realStateBtn.click(function() {
        console.log('TRIGGERED');
        window.location.href='http://realestatecenter.bankofamerica.com/';
    });

    link.click(function() {
        window.location.href="http://realestatecenter.bankofamerica.com/";
    });
});

as you see the vars realStateBtn and link take you to the same place/has the same function applied so what can I do in order to put the same code into one function?

I know I can do something like this:

$('.class1, class2').click(...)

but in this case I have this elements:

$('#real-estate-center').parent();

$('#real-estate-center > .linkwidth');

Suggestions?

Barmar · Accepted Answer · 2016-09-01 17:08:38Z

1

You can use the .add() method to combine jQuery objects.

realStatebtn.add(link).click(function() {
    console.log('TRIGGERED');
    window.location.href='http://realestatecenter.bankofamerica.com/';
}

answered Sep 1, 2016 at 17:08

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt Coats · Accepted Answer · 2016-09-01 17:02:12Z

0

It's exactly as you said: move the code into a single function:

function move() {
   window.location.href='http://realestatecenter.bankofamerica.com/';
}

realStateBtn.click(move);
link.click(move);

Here is a jsfiddle showing the concept: https://jsfiddle.net/b0ynfnmn/

answered Sep 1, 2016 at 17:02

Matt Coats

3321 silver badge5 bronze badges

Comments

kapantzak · Accepted Answer · 2016-09-01 17:10:05Z

0

You could add a common class and listen the click event on this class:

// Store the elements you want to an array
var elems = [];
elem.push(realStateBtn);
elem.push(link);
// You can add more elements ...

Now iterate the array and add the same class:

for(var elem in elems) {
   elems[elem].addClass('my-element');
}

Add the appropriate event listener (using event delegation in order to work):

// Add event listener using event delegation
$(document).on('click', '.my-element', function() {
   window.location.href="http://realestatecenter.bankofamerica.com/";
});

edited Sep 1, 2016 at 17:10

answered Sep 1, 2016 at 17:03

kapantzak

11.8k5 gold badges42 silver badges63 bronze badges

Collectives™ on Stack Overflow

Same click event for multiple elements, specific case

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related