Add function to oninput listener using JQuery vs adding it directly to the html tag

Question

I'm dynamically appending a range input to the html body:

var slider = "<input type='range' min='1' max='100' value='50' class='slider' id='slider_1' oninput='f1()'>";
$('body').append(slider);

On each input, the function f1() should fire, e.g.

function f1(){
  console.log('fired');
}

With the code above, f1() fires each time the input is changed - just what I want.

However, the oninput function needs some parameters that are established later, so I want to add it programmatically like:

$("#slider_1").oninput = f1();

If I do this, f1() only fires once and not with every input.

Why is this and how can I change it?