i have several inputs and one of them is type="range" (priceslider). For all the inputs i use:

$('body').on('input', 'selector', function(e){
if(e.target.type == 'range") {
    return; // use the other handler because it keeps firing during slide 
}
xhr_filter = $.ajax({
...

Only for the range i use:

$('body').on('change', 'selector', function(e){
xhr_filter = $.ajax({
...

Otherwise it fires multiple times during the slide.

Now i use these 2 handlers seperated but i was wondering if it is possible to combine the 2. Example below does not work ofcourse but it's about the intention i want to achieve. So something like:

var handler = '';
$('body').on('input',  function(e){ 
    if(e.target.type == 'range') {  
        let handler = 'change';  
    }
    else {
        let handler = 'input'; 
    }
    
});
$('body').on(handler, 'selector', function(e){
xhr_filter = $.ajax({
...

i have several inputs and one of them is type="range" (priceslider). For all the inputs i use:

$('body').on('input', 'selector', function(e){
if(e.target.type == 'range") {
    return; // use the other handler because it keeps firing during slide 
}
xhr_filter = $.ajax({
...

Only for the range i use:

$('body').on('change', 'selector', function(e){
xhr_filter = $.ajax({
...

Otherwise it fires multiple times during the slide.

Now i use these 2 handlers seperated but i was wondering if it is possible to combine the 2. Example below does not work ofcourse but it's about the intention i want to achieve. So something like:

var handler = '';
$('body').on('input',  function(e){ 
    if(e.target.type == 'range') {  
        let handler = 'change';  
    }
    else {
        let handler = 'input'; 
    }
    
});
$('body').on(handler, 'selector', function(e){
xhr_filter = $.ajax({
...

• jquery
• input
• handler

• Could you please fix the syntax issues in your code? – trincot Commented Jan 18 at 17:56
• i know this is not correct syntax but it is about the idea behind it how to achieve this.... – Jack Maessen Commented Jan 18 at 17:57

1 Answer 1

Just keep the two on calls, but make one specific for each case using the appropriate CSS selector. And then a named function can have the common code to execute.

Tiny demo:

$('body').on('change', '[type=range]', handle)
         .on('input', ':not([type=range])', handle);

let counter = 0;
function handle(e){
    console.log("handler is called", ++counter);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input type="number" value="0"><br>
<input type="range">

So where you have "selector", make it "selector[type=range]" and "selector:not([type=range])"