Jquery On Method On Multiple Selectors

jQuery on() method on multiple selectors

Tags: javascript , jquery , jquery-1.7 Answers: 1 | Viewed 77,739 times



Since version 1.7 live is deprecated.


Following example is easy to make compatible with new on method:


$('nav li, #sb-nav li, #help li').live('click', function () {
// code...
});

Using on:


$('nav, #sb-nav, #help').on('click', 'li', function () {
// code...
});

How to rewrite following example using on?


 $('#header .fixed-feedback-bn, #sb-sec .feedback-bn').live('click', function () {
// code...
});

Some Answers For Jquery On Method On Multiple Selectors

#1. jQuery on () method on multiple selectors - Stack Overflow

Dec 10, 2011  · 9. If you're trying to use .on () so that you can listen to events on DOM object that may be created after you make the initial .on () call, then the most efficient way to do so is to …


$('nav li, #sb-nav li, #help li').live('click', function () {
// code... });

$('nav, #sb-nav, #help').on('click', 'li', function () {
// code... });

 $('#header .fixed-feedback-bn, #sb-sec .feedback-bn').live('click', function () {
// code... });

$(document).on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
// code... });

$('#mainContainer').on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
// code... });

$('#header, #sb-sec').on('click', function() {
// code here });

$('#feedback').on('click', '.feedback-bn, .fixed-feedback-bn', function() {
// code here });

#2. Multiple Selector (“selector1, selector2, selectorN”) - jQuery

You can specify any number of selectors to combine into a single result. This multiple expression combinator is an efficient way to select disparate elements. The order of the DOM …


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>multiple demo</title>
<style>
div, span, p {

width: 126px;

height: 60px;

float: left;

padding: 3px;

margin: 2px;

background-color: #eee;

font-size: 14px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div>div</div>
<p class="myClass">p class="myClass"</p>
<p class="notMyClass">p class="notMyClass"</p>
<span>span</span>
<script>
$( "div, span, p.myClass" ).css( "border", "3px solid red" );
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>multiple demo</title>
<style>
b {

color: red;

font-size: 16px;

display: block;

clear:left;
}
div, span, p {

width: 40px;

height: 40px;

float: left;

margin: 10px;

background-color: blue;

padding: 3px;

color: white;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<span>span</span>
<p>p</p>
<p>p</p>
<div>div</div>
<span>span</span>
<p>p</p>
<div>div</div>
<b></b>
<script>
var list = $( "div, p, span" )
.map( function() {

return this.tagName;
})
.get()
.join( ", " );
$( "b" ).append( document.createTextNode( list ) );
</script>
</body>
</html>

#3. [Solved] jQuery on() method on multiple selectors | 9to5Answer

Jul 09, 2022  · Solution 1 $(document).on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function { // code... }); .live() is just binding document as listener. My two cents are that you …


$(document).on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
// code... });

$('#mainContainer').on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
// code... });

$('#header, #sb-sec').on('click', function() {
// code here });

$('#feedback').on('click', '.feedback-bn, .fixed-feedback-bn', function() {
// code here });

$('nav li, #sb-nav li, #help li').live('click', function () {
// code... });

$('nav, #sb-nav, #help').on('click', 'li', function () {
// code... });

 $('#header .fixed-feedback-bn, #sb-sec .feedback-bn').live('click', function () {
// code... });

#4. .on() | jQuery API Documentation

If a data argument is provided to .on() and is not null or undefined, it is passed to the handler in the event.data property each time an event is triggered. The data argument can be any type, but if a string is used the selector must either be provided or explicitly passed as nullso that the data is not mistaken for a selector. Best practice is to...


$( "#dataTable tbody tr" ).on( "click", function() {
console.log( $( this ).text() );
});

$( "#dataTable tbody" ).on( "click", "tr", function() {
console.log( $( this ).text() );
});

function notify() {
alert( "clicked" );
}
$( "button" ).on( "click", notify );

function greet( event ) {
alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
name: "Karl"
}, greet );
$( "button" ).on( "click", {
name: "Addy"
}, greet );

var $test = $( "#test" );
function handler1() {
console.log( "handler1" );
$test.off( "click", handler2 );
}
function handler2() {
console.log( "handler2" );
}
$test.on( "click", handler1 );
$test.on( "click", handler2 );

$( "p" ).on( "click", function() {
alert( $( this ).text() );
});

function myHandler( event ) {
alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );

$( "form" ).on( "submit", false );

$( "form" ).on( "submit", function( event ) {
event.preventDefault();
});

$( "form" ).on( "submit", function( event ) {
event.stopPropagation();
});

$( "div" ).on( "click", function( event, person ) {
alert( "Hello, " + person.name );
});
$( "div" ).trigger( "click", { name: "Jim" } );

$( "div" ).on( "click", function( event, salutation, name ) {
alert( salutation + ", " + name );
});
$( "div" ).trigger( "click", [ "Goodbye", "Jim" ] );

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>on demo</title>
<style>
p {

color: red;
}
span {

color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
<script>
$( "p" ).on( "myCustomEvent", function( event, myName ) {
$( this ).text( myName + ", hi there!" );
$( "span" )

.stop()

.css( "opacity", 1 )

.text( "myName = " + myName )

.fadeIn( 30 )

.fadeOut( 1000 );
});
$( "button" ).click(function () {
$( "p" ).trigger( "myCustomEvent", [ "John" ] );
});
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>on demo</title>
<style>
.test {

color: #000;

padding: .5em;

border: 1px solid #444;
}
.active {

color: #900;
}
.inside {

background-color: aqua;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div class="test">test div</div>
<script>
$( "div.test" ).on({
click: function() {

$( this ).toggleClass( "active" );
}, mouseenter: function() {

$( this ).addClass( "inside" );
}, mouseleave: function() {

$( this ).removeClass( "inside" );
}
});
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>on demo</title>
<style>
p {

background: yellow;

font-weight: bold;

cursor: pointer;

padding: 5px;
}
p.over {

background: #ccc;
}
span {

color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>Click me!</p>
<span></span>
<script>
var count = 0;
$( "body" ).on( "click", "p", function() {
$( this ).after( "<p>Another paragraph! " + (++count) + "</p>" );
});
</script>
</body>
</html>

$( "body" ).on( "click", "p", function() {
alert( $( this ).text() );
});

$( "body" ).on( "click", "a", function( event ) {
event.preventDefault();
});

$( "#cart" ).on( "mouseenter mouseleave", function( event ) {
$( this ).toggleClass( "active" );
});

#5. jQuery on() method on multiple selectors - ErrorsAndAnswers.com

Since version 1.7 live is deprecated.. Following example is easy to make compatible with new on method: $('nav li, #sb-nav li, #help li').live('click', function { // code...


$('nav li, #sb-nav li, #help li').live('click', function () {
// code... });

$('nav, #sb-nav, #help').on('click', 'li', function () {
// code... });

 $('#header .fixed-feedback-bn, #sb-sec .feedback-bn').live('click', function () {
// code... });

$(document).on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
// code... });

$('#mainContainer').on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
// code... });

$('#header, #sb-sec').on('click', function() {
// code here });

$('#feedback').on('click', '.feedback-bn, .fixed-feedback-bn', function() {
// code here });

#6. JQuery .on() method with multiple event handlers to one …

Also, if you had multiple event handlers attached to the same selector executing the same function, you could use. $ ('table.planning_grid').on ('mouseenter mouseleave', function () { …


$("table.planning_grid td").live({
mouseenter:function(){
$(this).parent("tr").find("a.delete").show();
},
mouseleave:function(){
$(this).parent("tr").find("a.delete").hide();

},
click:function(){
//do something else.
} });

 $("table.planning_grid td").on({
mouseenter:function(){ //see above
},
mouseleave:function(){ //see above
}
click:function(){ //etc
}
});


$("table.planning_grid").on('mouseenter','td',function(){});

$("table.planning_grid").on('td',{
mouseenter: function(){ /* event1 */ },
mouseleave: function(){ /* event2 */ },
click: function(){ /* event3 */ } });

$("table.planning_grid").on({
mouseenter: function() {
// Handle mouseenter...
},
mouseleave: function() {
// Handle mouseleave...
},
click: function() {
// Handle click...
} }, "td");

$('table.planning_grid').on('mouseenter mouseleave', function() {
//JS Code });

$('input').on('keyup blur focus', function () {
//function block })

function showPhotos() {
$(this).find("span").slideToggle();
} $(".photos")
.on("mouseenter", "li", showPhotos)
.on("mouseleave", "li", showPhotos);

$("table.planning_grid").on({
mouseenter: function() {
// Handle mouseenter...
},
mouseleave: function() {
// Handle mouseleave...
},
'click blur paste' : function() {
// Handle click...
} }, "input");

$("textarea[id^='options_'],input[id^='options_']").on('keyup onmouseout keydown keypress blur change',
function() {
} );

#7. Jquery on method on multiple selectors | Autoscripts.net

Previous Post Next Post . JQuery on() method on multiple selectors. People also askHow to select multiple elements in a single jQuery selector?How to select multiple elements in a …


$('nav li, #sb-nav li, #help li').live('click', function () {
// code... });

$('nav, #sb-nav, #help').on('click', 'li', function () {
// code... });

 $('#header .fixed-feedback-bn, #sb-sec .feedback-bn').live('click', function () {
// code... });

$(document).on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
// code... });

$('#mainContainer').on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
// code... });

$('#header, #sb-sec').on('click', function() {
// code here });

$('#feedback').on('click', '.feedback-bn, .fixed-feedback-bn', function() {
// code here });

$('nav li, #sb-nav li, #help li').live('click', function () {
// code... });

$('nav, #sb-nav, #help').on('click', 'li', function () {
// code... });

 $('#header .fixed-feedback-bn, #sb-sec .feedback-bn').live('click', function () {
// code... });

$(document).on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
// code... });

$('#mainContainer').on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
// code... });

$('#header, #sb-sec').on('click', function() {
// code here });

$('#feedback').on('click', '.feedback-bn, .fixed-feedback-bn', function() {
// code here });

$("#tablename").on("click", "tr", function() { } 

$("#tablename").on("click", "tr input[type='checkbox']", function() { } 

$("#tablename").on("click", "tr, input[type='checkbox']", function() { });

$("#tablename").on("click", "tr, input[type='checkbox']", function() { });


$("#tablename").on("click", "tr, input[type='checkbox']", function() {
//use "," ---^^^---- here for multiple
});

$("#tablename").on("click", "tr, input[type='checkbox']", function(e) {
//e.preventDefault();
// This is wrong, plz check
e.stopPropagation();
// Hope this will help you one day });

<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>multiple demo</title>
<style>
div, span, p {
width: 126px;
height: 60px;
float: left;
padding: 3px;
margin: 2px;
background-color: #eee;
font-size: 14px;
} </style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script></head><body>
<div>div</div><p class="myClass">p class="myClass"</p><p class="notMyClass">p class="notMyClass"</p><span>span</span>
<script>$( "div, span, p.myClass"
).css( "border", "3px solid red"
);</script>
</body></html>

<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>multiple demo</title>
<style>
b {
color: red;
font-size: 16px;
display: block;
clear:left;
} div, span, p {
width: 40px;
height: 40px;
float: left;
margin: 10px;
background-color: blue;
padding: 3px;
color: white;
} </style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script></head><body>
<span>span</span><p>p</p><p>p</p><div>div</div><span>span</span><p>p</p><div>div</div><b></b>
<script>var list = $( "div, p, span"
) .map( function() {
return this.tagName;
}) .get() .join( ", "
);$( "b"
).append( document.createTextNode( list ) );</script>
</body></html>

$('nav li, #sb-nav li, #help li').live('click', function () {
// code... });

$('nav, #sb-nav, #help').on('click', 'li', function () {
// code... });

 $('#header .fixed-feedback-bn, #sb-sec .feedback-bn').live('click', function () {
// code... });

$(document).on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
// code... });

$('#mainContainer').on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
// code... });

$('#header, #sb-sec').on('click', function() {
// code here });

$('#feedback').on('click', '.feedback-bn, .fixed-feedback-bn', function() {
// code here });

  $(selector).on(event, childSelector, data, function)  

#8. Learn the Examples of jQuery Multiple Selectors - EDUCBA

This is a guide to jQuery Multiple Selectors. Here we discuss the Examples for the jQuery UI, multiple selectors, along with the codes and outputs. You may also have a look at the following articles to learn more – 1. jQuery redirect 2. jQuery Timer 3. jQuery Datepicker 4. jQuery Sortable


$( "selector1, selector2, … selectorN ")

<!doctype html>
<html lang ="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery UI multiple selectors  </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ $("p, div").css("background-color", "red");
});
</script>
</head>
<body>
<p class = "p1">This is the first p element of the DOM.</p>
<p class = "p2">This is the second p element of the DOM.</p>
<span class = "span1">This is the first span element of the DOM.<p class = "p1">This is the third p element of the DOM. </p>
</span>
<div class = "div1">This is the first div element of the DOM.</div>
</body>
</html>

<!doctype html>
<html lang ="en">
<head>
<meta charset = "utf-8">
<title>This is an example for jQuery UI multiple selectors  </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ $(".p2, .div1, .span1").css( "background-color", "red" );
});
</script>
</head>
<body>
<p class = "p1">This is the first p element of the DOM.</p>
<p class = "p2">This is the second p element of the DOM.</p>
<span class = "span1">This is the first span element of the DOM. <p class = "p1">This is the third p element of the DOM. </p>
</span>
<p class = "p1">This is the fourth p element of the DOM. <span class = "span2">This is the second span element of the DOM. </span>
</p>
<div class = "div1">This is the first div element of the DOM. </div>
</body>
</html>

<!doctype html>
<html lang ="en">
<head>
<meta charset = "utf-8">
<title>This is an example for jQuery UI multiple selectors  </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ $("#pid1, #divid1, #spanid1").css( "background-color", "red" );
});
</script>
</head>
<body>
<p class = "p1" id = "pid1">This is the first p element of the DOM.</p>
<p class = "p2" id = "pid2">This is the second p element of the DOM.</p>
<span class = "span1" id = "spanid1">This is the first span element of the DOM. <p class = "p1" id = "pid1">This is the third p element of the DOM. </p>
</span>
<p class = "p2" id = "pid2">This is the fourth p element of the DOM. <span class = "span2" id = "spanid2">This is the second span element of the DOM. </span>
</p>
<div class = "div1" id = "divid1">This is the first div element of the DOM. </div>
</body>
</html>

<!doctype html>
<html lang ="en">
<head>
<meta charset = "utf-8">
<title>This is an example for jQuery UI multiple selectors  </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ $("p, .div1, #spanid1").css( "background-color", "red" );
});
</script>
</head>
<body>
<p class = "p1" id = "pid1">This is the first p element of the DOM.</p>
<p class = "p2" id = "pid2">This is the second p element of the DOM.</p>
<span class = "span1" id = "spanid1">This is the first span element of the DOM. <p class = "p1" id = "pid1">This is the third p element of the DOM. </p>
</span>
<p class = "p2" id = "pid2">This is the fourth p element of the DOM. <span class = "span2" id = "spanid2">This is the second span element of the DOM. </span>
</p>
<div class = "div1" id = "divid1">This is the first div element of the DOM. </div>
</body>
</html>

#9. jQuery on() method on multiple selectors - Stack Overflow

Dec 11, 2011  · 9. If you're trying to use .on () so that you can listen to events on DOM object that may be created after you make the initial .on () call, then the most efficient way to do so is to …


$('nav li, #sb-nav li, #help li').live('click', function () {
// code... });

$('nav, #sb-nav, #help').on('click', 'li', function () {
// code... });

 $('#header .fixed-feedback-bn, #sb-sec .feedback-bn').live('click', function () {
// code... });

$(document).on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
// code... });

$('#mainContainer').on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
// code... });

$('#header, #sb-sec').on('click', function() {
// code here });

$('#feedback').on('click', '.feedback-bn, .fixed-feedback-bn', function() {
// code here });

Please leave your answer here: