Attaching A Click Event To Multiple Elements At Once?
Here is my code in jQuery: $('.paragraph, .section, .heading').on('input', function (e) { localStorage.setItem($(this).attr('id'), $(this).text()); }); Is there any JavaScript
Solution 1:
You could use querySelectorAll with your multiple element selectors, then add the event listeners to each one
var elements = document.querySelectorAll(".a, .b");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("click", function() {
console.log("clicked");
});
}
Solution 2:
Suppose you want to add click event to multiple elements, then set their class name as for example demo
demos= document.getElementsByClassName('demo');
for (var i = 0; i < demos.length; i++) {
demos[i].addEventListener('click',redirect,false);
}
functionredirect(){
alert(this.id);
}
Solution 3:
Credit goes to:
Javascript click event listener on multiple elements and get target ID
articles = document.getElementsByTagName('button');
for (var i = 0; i < articles.length; i++) {
articles[i].addEventListener('click',redirect,false);
}
functionredirect(){
alert(this);
}<button></button><button></button>Solution 4:
$( "div, span, p.myClass" ).css( "border", "3px solid red" );div, span, p {
width: 126px;
height: 60px;
float: left;
padding: 3px;
margin: 2px;
background-color: #eee;
font-size: 14px;
}<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><body><div>div</div><pclass="myClass">p class="myClass"</p><pclass="notMyClass">p class="notMyClass"</p><span>span</span>
Post a Comment for "Attaching A Click Event To Multiple Elements At Once?"