将JQuery点击事件直接指向两个相同元素？

Question

I have a webpage which loads a slider/drawer. Inside the webpage, I load an html div for the contents of the drawer for when the window is expanded, and another duplicate of it for when the window is collapsed in a small window like on a phone.

On the page is have a function like

$('#button').click(function(){
  //do something
});

The large button of

<div id="button">
 //button here
</div>

loads before the small version. So clicking the large one works and the .click event is triggered, but for the small one it isn't.

How can I get my .click function to observe the click event on the small drawer when it's clicked?

Answer 1

If I understand the situation correctly, you are in need of a single function which handles click events from multiple elements.

I would not use IDs for the elements, but instead use a class to decorate the ones that need the functionality. Then using 'this', I can further modify the item that was clicked...

$('.myClickable').click(function(){
  $(this).someFunc();
});

Answer 2

Use same class, different ids:

$('.button').click(function(){
var foo=$(this).attr('id');
alert(foo);
});

html:

<div class="button" id="bar">
</div>

<div class="button" id="moo">
</div>