[英]on click of multiple elements in jquery?
我有:
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</div>
我想要的是單擊以上任何元素,然后調用此函數:
function clickedele(){
alert("Ele clicked");
}
我嘗試了這些,但是沒有用:
var mhele_1 = $('#d1');
var mhele_2 = $('#d2');
var mhele_3 = $('#d3');
var menu_ico =$('#d4');
$([menu_ico.get(0),mhele_1.get(0), mhele_2.get(0),mhele_3.get(0)]).on('click', function(){
alert("Ele clicked");
});
要么
$('#menu_ico,#d1, #d2,#d3').on()
要么
$('#menu_ico').add('#d1').add('#d2').add('#d3').on()
但沒有一個有效
您的選擇器#menu_ico
不指向元素ID為d1
, d2
和d3
的元素,因此請組合ID選擇器並綁定click事件處理程序。
$('#d2,#d3,#d4').on('click', function(){
alert("Ele clicked");
});
$('#d2,#d3,#d4').on('click', function() { alert("Ele clicked"); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="d1"> <div id="d2">a</div> <div id="d3">b</div> <div id="d4">c</div> </div>
更新1:如果元素是動態添加的,則使用事件委托 。
// assumes `#d1` is not dynamically added,
// if yes then use any of it's ancestor present
$('#d1').on('click', '#d2,#d3,#d4', function(){
alert("Ele clicked");
});
$('#d1').on('click', '#d2,#d3,#d4', function(){ alert("Ele clicked"); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="d1"> <div id="d2">a</div> <div id="d3">b</div> <div id="d4">c</div> </div>
僅供參考:使用文檔就緒處理程序中的代碼在元素加載后運行,或者在頁面末尾添加代碼。
更新2:更好的方法是對所有元素使用通用類,並將處理程序綁定到該通用類。
$('.d').on('click', function() { alert("Ele clicked"); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="d1"> <div id="d2" class="d">a</div> <div id="d3" class="d">b</div> <div id="d4" class="d">c</div> </div>
function clickedele() { console.log('clicked'); } $('div[id^="d"]').on('click',clickedele);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="d1"> <div id="d2"></div> <div id="d3"></div> <div id="d4"></div> </div>
使用$('div[id^="d"]')
選擇ID以d
開頭的所有div,您也可以使用其他任何模式,例如$('#d1 > div[id^="d"]')
在d1
div中選擇ID以d
開頭的所有div。
$('.common').click(clickedele) function clickedele() { alert("click from " + $(this).text()) alert("Ele clicked"); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="d1"> <div id="d2" class="common">1</div> <div id="d3" class="common">2</div> <div id="d4" class="common">3</div> </div>
$('#d1 div').click(clickedele) function clickedele() { alert("click from " + $(this).text()) alert("Ele clicked"); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="d1"> <div id="d2" class="common">1</div> <div id="d3" class="common">2</div> <div id="d4" class="common">3</div> </div>
$('#d1 div')
HTML:
<div id="d1">
<div id="d2" onclick="isClicked(this)">d2</div>
<div id="d3" onclick="isClicked(this)">d3</div>
<div id="d4" onclick="isClicked(this)">34</div>
</div>
javascript:
function isClicked(obj){
alert(obj.id);
}
事件委托應該是要走的路。
$('#d1').on('click', clickFunc) function clickFunc(e) { alert($(e.target).text()) }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="d1"> <div id="d2">1</div> <div id="d3">2</div> <div id="d4">3</div> </div>
您可以給孩子div一個普通的班級。 假設類名稱為childDiv。 然后,您可以處理div的click事件。
$(".childDiv").on("click",function(){
alert("Ele clicked");
})
最好為此使用循環:
$('#d1 > div').each(function(){
$(this).click(function(){
alert("Ele clicked");
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.