Прикрепление события к нескольким элементам за один раз

Скажем, у меня есть следующее:

var a = $("#a");
var b = $("#b");

//I want to do something as such as the following : 

$(a,b).click(function () {/* */}); // <= does not work

//instead of attaching the handler to each one separately

Очевидно, что это не работает, потому что в функции $ второй аргумент - это context, а не другой элемент.

Итак, как я могу прикрепить событие к обоим элементам за один раз?

[Обновление]

peirix опубликовал интересный фрагмент, в котором он сочетает элементы с знаком &; Но я заметил это:

$(a & b).click(function () { /* */ }); // <= works (event is attached to both)

$(a & b).attr("disabled", true); // <= doesn't work (nothing happens)

Из того, что вы можете видеть выше, по-видимому, комбинация с знаком & работает только при присоединении событий...?

Ответы

Ответ 1

метод добавления jQuery - это то, что вы хотите:

Добавляет больше элементов, соответствующих данному выражению, набору согласованных элементов

var a = $("#a");
var b = $("#b");
var combined = a.add(b)

Ответ 2

Не забывайте, что селектора jQuery поддерживают синтаксис запятой CSS. Если вам нужно объединить две произвольные коллекции, все остальные предложения находятся на отметке, но если это так же просто, как сделать что-то с элементами с идентификаторами a и b, используйте $('#a,#b').

Ответ 3

На этот вопрос уже был дан ответ, но я думаю, что более простой, более простой способ достичь той же цели будет заключаться в том, чтобы полагаться на сходство между моделью селектора jQuery и CSS и просто делать:

$("#a, #b").click(function () {/* */});

Я часто использую это и никогда не видел, чтобы он не работал (я не могу говорить о версиях jQuery до 1.3.2, хотя, как я его не тестировал). Надеюсь, это когда-нибудь поможет кому-то.

UPDATE: Я просто перечитал поток и пропустил комментарий, сделанный вами о том, что указанные узлы уже сохранены для переменных, но этот подход все равно будет работать с одним незначительным tweek. вы захотите сделать:

var a = $("#a");
var b = $("#b");
$(a.selector+", "+b.selector).click(function () {/* */});

Одна из замечательных вещей, которые делает jquery, заключается в том, что она добавляет несколько специальных свойств jQuery к возвращаемому node (селектор, который является исходным селектором, используемым для захвата того, что node является одним из них). Вы можете столкнуться с некоторыми проблемами с этим, если выбранный вами селектор уже содержит запятые. Возможно, это также возможно, если это проще, чем просто добавить add, но его интересным примером того, насколько классным jquery может быть:).

Ответ 4

Вы можете просто поместить их в массив:

$.each([a, b], function()
{
    this.click(function () { });
});

Ответ 5

Почему бы вам не использовать массив? Это работает на моей стороне:

$([item1, item2]).on('click', function() {
      // your logic
});

Ответ 6

Я просто попытался объединиться с этим и нашел что-то очень круто:

$(a & b).click(function() { /* WORKS! */ });

supersweet!

Изменить: Теперь я действительно смущен тем, что не тестировал это правильно. Что это значит, на самом деле было поставить событие click на все... Не знаете, почему это происходит, хотя...

Ответ 7

Вы также можете создать имя класса и предоставить каждому элементу, который хотите работать с этим классом. Затем вы можете привязать событие ко всем элементам, разделяющим этот класс.

<p><a class="fakeClass" href="#">Click Me!</a></p>

<p><a class="fakeClass" href="#">No, Click Me!</a></p>

<div class="fakeClass">Please, Click Me!</div>

<script type="text/javascript">
    $(function () {
        $(".fakeClass").on("click", function () {
            alert("Clicked!");
        });
    })
</script>

Ответ 8

попробуйте следующее: сладкое и простое.

var handler = function() {
    alert('hi!');
}
$.each([a,b], function() {
    this.click(handler);
}

Кстати, этот метод не стоит проблем.

Если вы уже знаете, что есть только два из этих методов, то я думаю, что лучшим вариантом было бы

a.click(handler);
b.click(handler);

Ура!

Ответ 9

Пример:

$("[name=ONE_FIELD_NAME], [name=ANOTHER_FIELD_NAME]").keypress(function(e){alert(e.which);});