将事件附加到多个元素
说我有以下几点:
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)
从上面你可以看到,显然,与&
符号的组合只有在附加事件时才起作用…?
jQuery的添加方法是你想要的:
将由给定expression式匹配的更多元素添加到匹配元素的集合中
var a = $("#a"); var b = $("#b"); var combined = a.add(b)
不要忘记,jQueryselect器支持CSS逗号语法。 如果你需要把两个任意的集合结合起来,其他人的build议就是标记,但是如果对于ID和b
元素做一些简单的操作,可以使用$('#a,#b')
。
这个问题已经被回答了,但是我认为更简单更简单的方法来完成同样的目标是依靠jQuery和CSSselect器模型的相似之处,
$("#a, #b").click(function () {/* */});
我经常使用它,并从来没有见过它不工作(我不能说1.3.2之前的jQuery版本,但我没有testing过)。 希望这有助于某个人。
更新:我刚刚重读了这个线程,并且错过了关于让有问题的节点已经保存到variables中的评论,但是这个方法仍然可以工作,只需要一小段时间。 你会想做:
var a = $("#a"); var b = $("#b"); $(a.selector+", "+b.selector).click(function () {/* */});
jquery所做的一件很酷的事情是它为它返回的节点添加了一些特定于jQuery的属性(select器,这是用于获取该节点的原始select器就是其中之一)。 如果您使用的select器已经包含逗号,则可能会遇到一些问题。 它也可能是可争议的,如果这是更容易,那么只是使用添加,但它是一个有趣的例子,如何酷jquery可以:)。
你可以把它们放在一个数组中:
$.each([a, b], function() { this.click(function () { }); });
你为什么不使用数组? 这在我身边运作:
$([item1, item2]).on('click', function() { // your logic });
我只是试着搞这个,发现很酷的东西:
$(a & b).click(function() { /* WORKS! */ });
超甜!
编辑:现在我感到非常尴尬的不正确的testing。 这样做,实际上是把事件放在一切 …不知道为什么这样做,但…
您也可以组成一个class级名称,并给予您想要与该class级一起工作的每个元素。 然后,您可以将事件绑定到共享该类的所有元素。
<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>
试试这个:甜美而简单。
var handler = function() { alert('hi!'); } $.each([a,b], function() { this.click(handler); }
顺便说一下,这种方法是不值得的麻烦。
如果你已经知道这些方法只有两种,那么我猜最好的select是
a.click(handler); b.click(handler);
干杯!
例:
$("[name=ONE_FIELD_NAME], [name=ANOTHER_FIELD_NAME]").keypress(function(e){alert(e.which);});