我有:
<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 选择器并绑定(bind)点击事件处理程序。
$('#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: 如果元素是动态添加的,则使用 event delegation .
// 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>
仅供引用:在 document ready handler 内使用您的代码在加载元素或在页面末尾添加代码后运行。
更新 2:更好的方法是对所有元素使用通用类并将处理程序绑定(bind)到该类。
$('.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>
关于javascript - 点击jquery中的多个元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44019118/