[英]on click of multiple elements in jquery?
I have: 我有:
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</div>
What I want is in which ever of the above element is clicked call this function: 我想要的是单击以上任何元素,然后调用此函数:
function clickedele(){
alert("Ele clicked");
}
I tried these But none worked: 我尝试了这些,但是没有用:
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");
});
or 要么
$('#menu_ico,#d1, #d2,#d3').on()
or 要么
$('#menu_ico').add('#d1').add('#d2').add('#d3').on()
But none worked 但没有一个有效
Your selector #menu_ico
does not point to the element the element ids are d1
, d2
and d3
so combine the id selectors and bind click event handler. 您的选择器
#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>
UPDATE 1: If the elements are dynamically added then use event delegation . 更新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>
FYI : Use your code within document ready handler to run after elements are loaded or add code at the end of the page. 仅供参考:使用文档就绪处理程序中的代码在元素加载后运行,或者在页面末尾添加代码。
UPDATE 2: The better approach would be using a common class for all elements and bind the handler to that. 更新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>
use $('div[id^="d"]')
to select all div with id starting with d
you can use any other pattern also like $('#d1 > div[id^="d"]')
to select all div with id starting with d
inside d1
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')
$('#d1 div')
HTML : 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 : javascript:
function isClicked(obj){
alert(obj.id);
}
https://jsfiddle.net/emilvr/dyzgcju5/ https://jsfiddle.net/emilvr/dyzgcju5/
Event Delegation should be the way to go. 事件委托应该是要走的路。
$('#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>
You can give child divs a common class. 您可以给孩子div一个普通的班级。 Lets suppose the class name is childDiv.
假设类名称为childDiv。 Then you can handle the click event of the divs.
然后,您可以处理div的click事件。
$(".childDiv").on("click",function(){
alert("Ele clicked");
})
Its better to use a loop for that: 最好为此使用循环:
$('#d1 > div').each(function(){
$(this).click(function(){
alert("Ele clicked");
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.