Question

我在application.js中声明了以下函数：

var cancelToggle = function(e, textToToggle, elementToToggle) {
  alert("hello");
  e.preventDefault();
  if ($(this).text() == "Cancel") {
    $(this).text(textToToggle);
  }
  else {
    $(this).text("Cancel");
  }
  elementToToggle.slideToggle();
}

对于我的一个模型，我有一个ajax响应尝试将上述函数绑定到click事件，这里是.js.erb文件中的代码：

$("#toggle_leave_team_<%= @team.id %>").on("click", cancelToggle(e, "Leave team", $("#confirm_leave_team_<%= @team.id %>")));

以及各自的观看代码：

%p= link_to "Confirm Leave", idea_team_membership_path(@idea, @team, @team.membership_for(current_user)), :class => "btn", method: :delete, id: "confirm_leave_team_#{@team.id}", remote: true
= link_to "Cancel", "", class: "btn btn-large btn-block btn-primary", id: "toggle_leave_team_#{@team.id}"

我希望的功能是通过单击取消按钮，它显示/隐藏传递给cancelToggle功能的选择器，同时还更改按钮的文本。目前，当我按下取消按钮时，页面刷新。我认为默认是没有被正确阻止，但不知道如何解决这个问题：（

Answer 1

尝试绑定时，您正在调用您的函数。最简单的解决方案是将其包装在匿名函数中。添加了.call以通过this上下文传递。

$("#toggle_leave_team_<%= @team.id %>").on("click", function(e) { cancelToggle.call(this, e, "Leave team", $("#confirm_leave_team_<%= @team.id %>")); }));

修改：

使用函数currying
可以更清晰地完成此操作
将您的切换功能修改为函数发生器（它返回一个函数）

var createCancelToggle = function(textToToggle, elementToToggle) { return function(e) { e.preventDefault(); if ($(this).text() == "Cancel") { $(this).text(textToToggle); } else { $(this).text("Cancel"); } elementToToggle.slideToggle(); } }

现在当你绑定到click事件时，你调用createCancelToggle并将返回的函数作为点击处理程序传递给on()：

$("#toggle_leave_team_<%= @team.id %>").on("click", createCancelToggle("Leave team", $("#confirm_leave_team_<%= @team.id %>")));

在视图.js文件中调用application.js函数不起作用？

1 个答案: