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

Question

所以我有一个如下结构的脚本:

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

效果很好。但是，除了 .save-audition 之外，还有几个元素我想使用相同的脚本，只有几个变量不同。通过四处搜索，我认为下面的方法可以工作，但它似乎不起作用。我应该使用的正确语法是什么？

$('.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

如果您只想将函数设计为事件处理程序，那么您可以将值作为数据传递，例如

$('.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>

<小时/>

您的代码的问题是您立即调用该函数。

您还可以使用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>