Question

我希望能够将代码放在一个地方并从几个不同的事件中调用它。

目前我有一个选择器和一个事件：

$("input[type='checkbox']").on('click', function () {
  // code works here //
});

我在文件的其他地方使用相同的代码，但是使用不同的选择器。

$(".product_table").on('change', '.edit_quantity', function () {
  // code works here //
});

我已经尝试按照StackOverflow上其他地方给出的建议，简单地给我的函数命名，然后调用命名函数，但这对我不起作用。代码根本不运行。

$(".product_table").on('change', '.edit_quantity', function () {
  calculateTotals() {
    // code does not work //
  }
});

所以，我尝试将代码放入与事件分开的自己的函数中并在事件中调用它，这对我来说也不起作用。

calculateTotals() {
  // code does not work //
}

那么我做错了什么？

Answer 1

您可以将函数作为变量传递。

您希望在加载DOM后添加事件的侦听器，JQuery帮助$(document).ready(fn);（ref）。

修复您的代码：

 $(document).ready(function() {
   $("input[type='checkbox']").on('click', calculateTotalsEvent)
   $(".product_table").on('change', '.edit_quantity', calculateTotalsEvent)
 });

 function calculateTotalsEvent(evt) {
   //do something 
   alert('fired');
 }

<强>更新
文斯问：

这对我有用 - 谢谢你，但是有一个问题：你说，“将你的功能作为变量传递”......我不知道你在做什么。你可以解释吗？韩国社交协会。 - Vince

<强>响应：
在JavaScript中，您可以将函数分配给变量。您可能在执行此操作时始终执行此操作：

function hello() {
  //
}

您定义window.hello 您正在添加到全局命名空间 JavaScript window object
这通常会导致模糊的JavaScript架构/意大利面条代码我使用命名空间结构进行组织一个小例子是：

<强> app.js

var app = {
  controllers: {}
};

您正在使用window.app的键定义controllers（仅json个对象），其值为对象。

<强>东西-ctlr.js

app.controllers.somethingCtlr.eventName = function(evt) {
  //evt.preventDefault?
  //check origin of evt? switch? throw if no evt? test using instanceof?
  alert('hi');
}

您正在之前定义的app.controllers.somethingCtlr eventName上定义一个新密钥。

您可以使用();调用该函数。

app.controllers.somethingCtlr.eventName（）;

这将转到对象中的键，然后调用它。您可以将此函数作为变量传递。

anotherFunction(app.controllers.somethingCtlr.eventName);

然后你可以在这样的函数中调用它

function anotherFunction(someFn) { someFn();}

javascript文件的结构如下：

  +-html
  +-stylesheets
  +-javascript-+
               +-app-+
                     +-app.js
                     +-controllers-+
                                   +-something-ctlr.js

通过chrome developer tools调用：

app.controllers.somethingCtlr.eventName（）;

您可以将其作为变量传递：

$(document).ready(function() {
  $('button').click(app.controllers.somethingCtlr.eventName);
});

JQuery（ref）。

我希望这有帮助，里斯

Answer 2

看起来你是在正确的轨道上，但有一些不正确的语法。调用函数时不需要{ }。在calculateTotals函数内添加代码后，此代码应该正常运行。

$(".product_table").on('change', '.edit_quantity', function () {
  calculateTotals();
});

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

function calculateTotals() {
  //your code...
}

Answer 3

你可以将它全部压缩成一个函数。 onchange事件适用于复选框和文本输入（不需要单击处理程序）。 jQuery允许您添加多个选择器。

＆＃13;

$('input[type=checkbox], .product_table .edit_quantity').on('change', function() {

  console.log('do some calculation...');

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="product_table">
  <input type="checkbox">
  <input class="edit_quantity">
</div>

＆＃13;

如何在JavaScript中将函数用作变量？

3 个答案: