Как отметить элементы, которые могут иметь события click?

Question

До сих пор я использую id, чтобы вызвать клик событий в JQuery, как:

<button class="btn" id="doAction">Action</button> 

$(document).on('click', '#doAction', function() 
{ 
    // handle the click event 
} 

Однако, что делать, если у меня есть несколько элементов на странице, которые должны вызвать такое же событие щелчка?

Например:

<button class="btn" id="doAction">Action</button> 
... 
<span class="action-trigger" id="doAction">Action</div> 

$(document).on('click', '#doAction', function() 
{ 
    // handle the click event 
} 

Проблема с этим состоит в том, что должен существовать только один уникальный id на любой странице.

Мой вопрос в том, что такое современные соглашения, чтобы справиться с этим?

Одним из решений, о котором я думал, было добавить свойство data-action="doAction" для каждого элемента, который должен вызывать событие click.

Это хороший способ решить эту проблему или есть лучшие способы?

Answer 1

Вы также можете использовать класс. Я лично предпочитаю использовать префикс js- и не добавлять стили CSS к тем, например: js-doaction:

$(document).on('click', '.js-doaction', function() { 
    // handle the click event 
} 

HTML:

<button class="btn js-doaction">Action</button> 
... 
<span class="action-trigger js-doaction">Action</div>