My script works fine on static content, but breaks when the content is changed via AJAX - jQuery -

-

i writing custom calendar, consists of 2 parts, 1 div showing month grid, , second div showing events selected date. current month's calendar grid loads automatically, , display of daily events works correctly. however, when user clicks button view next or previous month, clicking on dates no longer works. also, changing month no longer works on dynamically-loaded calendar.

this jquery code using:

<script type="text/javascript">     $(document).ready(      function() {         $('div.calendar_events').text('to view events on of highlighted dates, click date.');         $('div.number').click(          function(e) {             e.preventdefault();             var thedate = $(this).attr('id').split('-');             $('div.calendar_events').load('ajax/calendar_events.php?month=' + thedate[1] + '&day=' + thedate[2] + '&year=' + thedate[3]);         });         $('a.changemonth').click(          function(e) {             e.preventdefault();             var thedate = $(this).attr('id').split('-');             $('div.calendar').load('ajax/calendar_view.php?month=' + thedate[1] + '&year=' + thedate[2]);         });     }); </script>

don't setup events directly using click. use live instead.

$('div.number').live('click', function() { .. });

when new ajax content loads, new content replaces old , wipes out event handlers attached replaced content using bind or shortcut methods such click, change, etc.

live event handlers, on other hand, added document , due event bubbling in dom, events reach document (which never replace, or ideally should never replace :), can think of document safe-haven adding events.

also checkout delegate way make use of event bubbling, if performance freak.


Comments

Post a Comment

Popular posts from this blog

c++ - How do I get a multi line tooltip in MFC -

-
right now, have tool tip pops when hover on edit box. problem tool tip contains multiple error messages , in 1 long line. need have each error message on own line. error messages contained in cstring new line seperating them. my existing code below. bool ontooltiptext(uint, nmhdr* pnmhdr, lresult* presult) { assert(pnmhdr->code == ttn_needtexta || pnmhdr->code == ttn_needtextw); // need handle both ansi , unicode versions of message tooltiptexta* pttta = (tooltiptexta*)pnmhdr; tooltiptextw* ptttw = (tooltiptextw*)pnmhdr; // tchar szfulltext[256]; cstring strtiptext=_t(""); uint nid = pnmhdr->idfrom; if (pnmhdr->code == ttn_needtexta && (pttta->uflags & ttf_idishwnd) || pnmhdr->code == ttn_needtextw && (ptttw->uflags & ttf_idishwnd)) { // idfrom hwnd of tool nid = ::getdlgctrlid((hwnd)nid); } //m_errprojaccel[ch] contains 1 or more error messages each...
Read more

asp.net - In javascript how to find the height and width -

-
i having .aspx , masterpage page. in masterpage loading aspx page . in aspx page design using generating table structure using code-behind server in javascript how find height , width . regards, kumar if you're looking table height , width, should it var tbl = document.getelementbyid('tbldemo'); alert(tbl.offsetwidth + '\n' + tbl.offsetheight);
Read more

c# - DataTable to EnumerableRowCollection -

-
i have datatable according client requirement can contain invalid date "00/00/1999",null,empty string.(typed datset) when collect them enumerables wish convert of invalid forms empty string. (i.e) enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || (how check date invalid date) ? string.empty : order.field<datetime>("orderdate") } how check whether date valid date or not? datetime.tryparse...like given current code: datetime date; enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || !datetime.tryparse(convert.tostring(order.field<datetime...
Read more