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

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

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)

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

9 52
javascript jquery events

9 ответов:

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

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

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

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

38

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

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

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

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

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

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

16

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

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

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

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

Я просто попытался возиться с этим, и нашел что-то очень круто:

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

очаровашка!

Edit: теперь я чувствую себя очень неловко за то, что не проверил это должным образом. То, что это сделало, было на самом деле поставить событие click на все... Не знаю, почему он это делает, хотя...

2

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

<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>
2

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

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

кстати, этот метод не стоит.

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

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

Ура!

0

пример:

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