正确的语法将我的jQuery脚本转换为可重用的函数

Question

So I have a script structured like this:

$('.save-audition').on('click', function() {
    STUFF HAPPENS HERE
})

It's working great. But, there are several elements besides .save-audition that I would like to use the same script with just a few variables different. By searching around, I thought the below would work, but it doesn't seem to do the trick. What's the correct syntax I should be using?

$('.save-audition').on('click', tps_save_listing(audition));
$('.save-job').on('click', tps_save_listing(job));

function tps_save_listing(type) {
    STUFF HAPPENS HERE
}

Answer 1

If you want to design the function like a event handler only, then you can pass the value as the data like

 $('.save-audition').on('click', { type: 'audition' }, tps_save_listing); $('.save-job').on('click', { type: 'job' }, tps_save_listing); function tps_save_listing(event) { snippet.log(event.data.type) } 

 <!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="save-audition">1</div> <div class="save-audition">2</div> <div class="save-job">3</div> <div class="save-job">4</div> 

---

The problem with your code is you are invoking the function immediately.

You can also use Function.bind()

 $('.save-audition').on('click', tps_save_listing.bind(window, 'audition')); $('.save-job').on('click', tps_save_listing.bind(window, 'job')); function tps_save_listing(type) { snippet.log(type) } 

 <!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="save-audition">1</div> <div class="save-audition">2</div> <div class="save-job">3</div> <div class="save-job">4</div> 

Answer 2

What your looking for is called function application. Try out the code below, then I can explain what is going on.

 $('.button1').on('click', applied(myFunction, ['foo'])); $('.button2').on('click', applied(myFunction, ['bar', ' bat'])); function myFunction(text1, text2) { alert(text1); if (text2) alert(text2) } function applied(func, args) { return function() { func.apply(null, args); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="button1">Foo</button> <button class="button2">Bar</button> 

What is happening here is that when we call applied(myFunction, ['foo']) , we are actually creating a brand new, anonymous function with pre-specified parameters. This new, anonymous function is returned, and in turn will be call our original function with the parameters we have specified when the 'click' event is fired.

For convenience in this case, I've wrapped that functionality in a function called 'applied'.

More resources on this.

Currying and Partial Functions

MDN on Function.prototype.apply

Answer 3

You are calling function immediately at tps_save_listing(audition) , tps_save_listing(job) , instead of passing reference to tps_save_listing function. You can alternatively use event.data to pass variables to event handler tps_save_listing

$(".save-audition").on("click", null, audition, tps_save_listing);
$(".save-job").on("click", null, job, tps_save_listing);

function tps_save_listing(event) {
    // STUFF HAPPENS HERE
    console.log(event.data);
}

 var audition = 123; var job = "abc"; $(".save-audition").on("click", null, audition, tps_save_listing); $(".save-job").on("click", null, job, tps_save_listing); function tps_save_listing(event) { console.log(event.data) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <div class="save-audition"> save audition </div> <div class="save-job"> save job </div> 

jsfiddle https://jsfiddle.net/p1gcxw5y/