[英]jquery on('click') handler for multiple elements referenced by vars
注意我知道我添加了 id 並將它們組合在一個選擇器中,例如“#myDiv1,#myDiv2”,所以請不要提出這個建議,因為它與我的問題無關。
有沒有辦法在一個 on() 聲明中將下面的變量“鏈接”在一起,可能作為數組或其他東西?
var myDiv1 = $('<div>Something here</div>');
var myDiv2 = $('<div>Something else here</div>');
myDiv1.on('click', function(){ doSomething();});
myDiv2.on('click', function(){ doSomething();});
我有一堆 vars,我需要對鼠標事件進行一些廣泛的跟蹤,並且像上面的例子一樣單獨設置它們感覺很亂。
您可以將DOM元素數組傳遞給jQuery函數 :
$([ myDiv1.get(0), myDiv2.get(0) ]).on('click', function(){ doSomething();});
另一種可能的方法是使用.add()
方法 :
myDiv1.add(myDiv2).on('click', function(){ doSomething();});
將它們放入數組中,遍歷它們並附加相同的處理程序。 我使用ES5 forEach
進行了示例,但可以隨時使用簡單的for
循環或$.each
。
[cucc, gomb].forEach(function (el) { el.on('click', handler); });
如果他們有一個共同的祖先,則在他們身上放一個共同的類,並使用事件委托 。 根據您元素的數量,這可能是性能最佳的解決方案,因為您只需要將一個處理程序附加到公共祖先即可。
$('.ancestor').on('click', '.common', handler);
添加到卡帕的答案。 如果您需要綁定已添加、前置、附加、加載的多個元素,請使用 ajax 或 javascript。
遍歷多個類並為“每個”元素創建綁定
var thisButton = '.this-button', //This element was added by js
thatButton = '.that-button', //That element was added by ajax
thesebuttons = [thisButton, thatButton];
thesebuttons.forEach(function (button) {
$(document).on('click touchend', button, function (e) {
// 'e' or event, uncomment to prevent button's default event
// e.preventDefault();
// Now do your function stuff
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.