yacal.js next/back button удаляет прослушиватель событий jquery

Я использую yacal.js для создания календаря.yacal.js next/back button удаляет прослушиватель событий jquery

Вот javascript и css для yacal.js (его с моего сайта, потому что я не мог найти для него CDN)

Для моего проекта, я пытаюсь сделать так, чтобы, когда пользователь клики по дате, запрос ajax отправляется на мою php-страницу с датой, и моя php-страница получает строку из базы данных с соответствующей датой.

все это работает отлично ... но когда я нажимаю на кнопку Далее/назад (две кнопки в верхней части календаря, изменяющие месяцев) она удаляет мой 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>

обратите внимание, что после того, как вы нажмете назад или вперед кнопку несколько раз он не предупредит больше

источник

2015-09-30 krummens

Классическая проблема в JS DOM сценариев. Вы перезаписываете содержимое HTML и не переустанавливаете прослушиватели событий. Слушатели событий теряются, если соответствующие элементы перезаписываются. Что-то, что даже произошло с самими разработчиками Stack Overflow (http://meta.stackexchange.com/q/254593/289905). – Xufox

Использования event delegation

делегации событий позволяет нам приложить один прослушиватель событий, к родительскому элементу, который будет срабатывать для всех потомков, соответствующих селектору, независимо от того, существуют ли эти потомки или являются в будущем.

Вы связываете событие с загрузкой страницы. Но когда элементы удаляются и заменяются другими элементами (днями), событие является несвязанным.

переплета событие, используя в качестве 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>

источник

2015-09-30 03:25:49 Tushar

yacal.js next/back button удаляет прослушиватель событий jquery

ответ

Смежные вопросы