javascript - yacal.js next/back button removes jquery event listener -


i using yacal.js build calendar.

here javascript , css yacal.js (its site because couldn't find cdn it)

for project, trying make when user clicks on date, ajax request sent php page date , php page gets row database matching date.

all of works fine... when click next/back button (the 2 buttons @ top of calendar change months) removes jquery event:

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

why happening?

or can fix it?

<!doctype html>  <html>    <head>    <title>calendar</title>    <!-- latest compiled , 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 < 10) ? '0' + : a;        b = (b < 10) ? '0' + b : b;        alert('day:' + + ', month:' + b + ', year:' + c);      }      $('#calendartemplate').yacal();    </script>  </body>    </html>

notice after click or forward buttons few times doesn't alert anymore

use event delegation

event delegation allows attach single event listener, parent element, fire descendants matching selector, whether descendants exist or added in future.

you're binding event on page load. when elements removed , replaced other elements(days), event unbound.

bind event using on as

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

demo

$(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 < 10) ? '0' + : a;    b = (b < 10) ? '0' + b : b;    alert('day:' + + ', 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>


Comments

Post a Comment

Popular posts from this blog

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

this question has answer here: why spring mvc respond 404 , report “no mapping found http request uri […] in dispatcherservlet”? 3 answers i trying making simple bbs i'm encountering following error, warn : org.springframework.web.servlet.pagenotfound - no mapping found http request uri [/board/] in dispatcherservlet name 'appservlet' i have tried solve error many times, have failed. how can solve error? here web.xml, controllerand , servlet-context. my web.xml <?xml version="1.0" encoding="utf-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <filter> <filter-nam...
Read more

html - Outlook 2010 Anchor (url/address/link) -

i'm trying link specific pdf page msoutlook'10 or msword'10, #page=... anchor particularly useful , works fine elsewhere. unfortunately when click [ctr-k] in outlook or winword, links re-formatted assuming unc path. pdf file located on shared drive. using "file:" prefix links open pdf in adobe reader (outside of browser), , "http:" open inside browser. issue seem need open in browser "file:" prefix in order anchor work. know anchors work inside browser. outlook uses windows/explorer default program (based on file extension) seems open in adobe reader neglecting anchor. is aware of solution, link specific page or bookmark of shared-pdf ms outlook and/or winword link? common references: mailermailer.com/...anchor-tags-html-emails campaignmonitor.com/...anchor-links-in-email-newsletters/ stackoverflow.com/...anchor-in-pdf-document
Read more

android - How to create dynamically Fragment pager adapter -

i unable create dynamic layout each tabs, able create tabs dynamically constructor(public mypageradapter(fragmentmanager fm , int nooftabs)), coudn't inflate view each tabs creating each fragment should dyanmic. public class mypageradapter extends fragmentpageradapter { private final string[] titles = { "categories", "home", "top paid", "top free", "top grossing", "top new paid", "top new free", "trending" }; int nooftabs; **public mypageradapter(fragmentmanager fm , int nooftabs) { super(fm); this.nooftabs = nooftabs; }** /*public mypageradapter(fragmentmanager fm) { super(fm); }*/ @override public charsequence getpagetitle(int position) { return titles[position]; } @override public int getcount() { ...
Read more