yacal.js next/back 按钮删除 jquery 事件侦听器

Question

我正在使用 yacal.js 构建日历。

这是 yacal.js 的 javascript and the css（它来自我的网站，因为我找不到它的 cdn）

对于我的项目，我试图做到这一点，以便当用户点击日期时，ajax 请求会发送到我的 php 页面，其中包含日期和我的 [=41] =] 页面从数据库中获取具有匹配日期的行。

一切正常...但是当我单击 next/back 按钮（日历顶部的两个按钮可以更改月份）时，它会删除我的 jQuery 事件：

$("a.day").click(function() {

为什么会这样？

或者我该如何解决？

<!DOCTYPE html>
<html>

<head>
  <title>Calendar</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://wxrunning.com/tests/jquery.yacal.css">
</head>

<body>
  <div id="calendarTemplate"></div>

  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
  <script src="http://wxrunning.com/tests/jquery.yacal.min.js" type="text/javascript"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      $("a.day").click(function() {
        showData(
          Number($(this).html()),
          $(this).parents("div.month").attr('class').replace('month m', ''),
          $(this).parents("div.month").children('h4').html().replace(/\D/g, '')

        );
      });
    });

    function showData(a, b, c) {
      a = (a < 10) ? '0' + a : a;
      b = (b < 10) ? '0' + b : b;
      alert('Day:' + a + ', Month:' + b + ', Year:' + c);
    }
    $('#calendarTemplate').yacal();
  </script>
</body>

</html>

请注意，在您点击后退或前进按钮几次后，它不再提醒

Answer 1

使用event delegation

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

您在页面加载时绑定事件。但是当元素被移除并被其他元素（天）替换时，事件是未绑定的。

使用on作为

绑定事件

$("#calendarTemplate").on("click", "a.day", function() {

演示

$(document).ready(function() {
  $("#calendarTemplate").on("click", "a.day", function() {
    showData(
      Number($(this).html()),
      $(this).parents("div.month").attr('class').replace('month m', ''),
      $(this).parents("div.month").children('h4').html().replace(/\D/g, '')
    );
  });
});

function showData(a, b, c) {
  a = (a < 10) ? '0' + a : a;
  b = (b < 10) ? '0' + b : b;
  alert('Day:' + a + ', Month:' + b + ', Year:' + c);
}
$('#calendarTemplate').yacal();

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://wxrunning.com/tests/jquery.yacal.css">

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://wxrunning.com/tests/jquery.yacal.min.js" type="text/javascript"></script>

<div id="calendarTemplate"></div>

yacal.js next/back 按钮删除 jquery 事件侦听器

yacal.js next/back button removes jquery event listener

javascript

jquery

calendar

jquery-events