One event on several elements

Question

I have this function:

function Any(){
  this.b1 = $("#but1")
  this.b2 = $('<div id="but2" />')
  this.func = function(){
     alert('hello')
  }
  this.b1.on('click',function(){
   this.func()
  })
  this.b2.on('click',function(){
   this.func()
  })


}

I want to do something like this:

(this.b1, this.b2).on('click',this.close)

Answer 1

You can use add()

this.b1.add(this.b2).on('click',this.close);

FIDDLE

Answer 2

I would keep an array of selectors:

//code
    this.selectors = ["#but1", "#but2"];
    $(this.selectors.join(",")).on('click', this.close);
//code

Answer 3

$("#but1,#but2").on("click",function(){
this.func();
});

Answer 4

Using the advanced syntax of .on() you may attach a listener to
a defined and stable object/selector (this) to look for the even on
dynamic SubComponents/selectors (#but1, #but2)
witch may or may not exists ... or show up later.

this.on('click','#but1,#but2',this.close);

Or in the more general case:

document.on('click','#but1,#but2', function(){ $('#my_dialog').close});