在 jquery 中第二次单击时执行函数答案

【问题标题】：Execute function on second click in jquery在 jquery 中第二次单击时执行函数
【发布时间】：2014-08-03 00:17:03
【问题描述】：

我有一个日历按钮，点击它会打开一个日期选择器并将日期放入输入文本框中。我想要发生的事情是让第二个文本框自动填充未来 30 天的日期。我遇到的问题是让它与 jquery 一起工作。

HTML：

<tr>
<td align = "center">Entry Date From:  <input id="ENTRYDATEFROM" name="ENTRYDATEFROM" type="text" maxLength="10" size="12" value="">
<img height="20"src="calendarsrc" id="entrySrc"></td>
<td align = "center">Entry Date To:   <input id="ENTRYDATETO" name="ENTRYDATETO" type="text" maxLength="10" size="12" value="">
<img height="20"src="calendarsrc" id="entrySrc2"></td>
</tr>

查询：

$(document).ready(function() {

  $("#entrySrc").click(function(){
     gAnytime.fPopCalendar(document.myform.ENTRYDATEFROM);
  });

  $("#entrySrc2").click(function(){
     gAnytime.fPopCalendar(document.myform.ENTRYDATETO);
  });

  //Tried this but had no success
  //$(document).on("change", "#entrySrc", populate);


});

function populate(){
 var q = $("#ENTRYDATEFROM");
 var dateTo    = new Date(q.val()); 
 var newDate   = new Date(dateTo.setDate(dateTo.getDate() + 30));
 var formatted = padNumber(newDate.getUTCMonth() + 1) + '-' + padNumber(newDate.getUTCDate()) + '-' + newDate.getUTCFullYear();
 $("#ENTRYDATETO").val(formatted);
}

function padNumber(number) {
  var string  = '' + number;
  string      = string.length < 2 ? '0' + string : string;
  return string;
}

这是我的 GUI 在单击任何内容之前的样子：

这是当我单击位于输入文本框右侧的#entrySrc 日历按钮时发生的情况

然后我可以在该日历框中单击我希望的任何日期。这将填充其左侧的输入文本框。

如何在日历框中的第二次点击时/针对第二次点击执行我的填充功能？

【问题讨论】：

我什至已经做了一个 mouseup 和 mousedown ......但仍然没有:(
那么我该如何解决我的问题呢？
我正在尝试找出您的点击处理程序试图完成的工作...您能否在 JSFiddle 中提供您的 HTML（以及您的代码）？
我正在处理一个包含数百个类和 javascript 文件的巨大 Web 项目...我不确定如何提供它的示例。也许我可以改写问题
您能否至少提供指向您正在使用的插件的链接... Google 搜索 fPopCalendar 会导致一些我见过的最糟糕的网站！ :)

标签： javascript jquery html date calendar

【解决方案1】：

可能有一个非常简单的解决方案：当#entrySrc 更改时触发populate() 方法。

$(document).on("change", "#entrySrc", populate);

或以下替代方案之一：

$("#entrySrc").on("change", populate);
$("#entrySrc").change(populate);

请注意，您传递的是 populate，而不是 populate()。

【讨论】：

没有收到任何结果，#entrySrc 实际上是日历按钮图像。我也试过了：$("#ENTRYDATEFROM").on("change", populate()); 每当输入文本框发生变化时都会调用填充，但那里也没有任何内容
我想确保您没有在测试中使用缓存代码。你很难提神吗？在 Windows 上为 Ctrl+F5，在 Mac 上为 Cmd+Shift+R。对陈旧代码进行测试是我在工作中必须时刻注意的事情:)
哦，我明白了。你不能像那样调用populate()，你必须省略括号。我没有打错字。
是的，每次更改后我都会精神焕发
@TrueBlueAussie，我说错了：根据 API，一个是 shortcut。另一个确实是委托事件，谢谢澄清。

【解决方案2】：

基于这里非常糟糕的文档：http://calendarxp.net/tutorials/flat/tutorials/PluginsSDK.htm 我猜您需要执行以下操作：

打开您的 plugins.js 文件，这显然是挂接大量全局函数的地方（这个控件太旧了）。

将您的代码放入fOnChange 模板（我认为这将是一个几乎为空的函数）：

///////////// Calendar Onchange Handler ////////////////////////////
// It's triggered whenever the calendar gets changed to y(ear),m(onth),d(ay)
// d = 0 means the calendar is about to switch to the month of (y,m); 
// d > 0 means a specific date [y,m,d] is about to be selected.
// e is a reference to the triggering event object
// Return a true value will cancel the change action.
// NOTE: DO NOT define this handler unless you really need to use it.
////////////////////////////////////////////////////////////////////
function fOnChange(y,m,d,e) {
  .... put your code here ....
return false; // return true to cancel the change.
}

你放在那里的东西应该是有实际用途的。我建议生成这样的自定义事件：

function fOnChange(y,m,d,e) {
    var $e = $(e.target); // (or e.originalTarget or whatever you can find with a debugger!)
    $e.trigger("calchange");
    return false; // return true to cancel the change.
}

这将要求在他们的 js 文件之前包含 jQuery。

在您的代码中，像这样对所有日历进行监听：

$(document).on('calchange', populate);

【讨论】：