0

I am trying to refactor a code source. I am stuck with a problem of recreating Jquery DatePicker.

My DatePicker has already been initialized like below :

$("#datepicker").datepicker({ 
            showOn : "button", 
          buttonText: "<i id='really' class='myclass'>Show</i>",
          dateFormat: 'dd/mm/yy'});

However , the button class - myclass , I am using that button to refresh the datePicker options.

$(".myclass").click(function(){
       //destroy the old datepicker.
       $("#datepicker").datepicker("destroy");
   
      //do something probably async here.
      doSomething();
 
      //Recreate the same with some other options
     $("#datepicker").datepicker({
          showOn : "button", 
          //More options go here. But buttonText remains the same.
          buttonText: "<i id='really' class='myclass'>Show</i>",
          dateFormat: 'dd/mm/yy'});
});

My datepicker refreshes, however I am not able trigger the same method again, by clicking the "new" datepicker button with same class.

Can someone help me ?

Update : I am using JQuery 1.3.2, can't use anything beyond that, weird constraints.

Savinay_
  • 41
  • 1
  • 3
  • 1
    Because you are clicking a new element that doesn't have the click handler. Look into [event delegation](https://stackoverflow.com/questions/203198). – msg May 30 '21 at 20:37
  • can you show me using Fiddle ? using my datepicker options ? Not able to trigger event for the ```#datepicker``` static ancestor - Lets say a
    – Savinay_ May 30 '21 at 21:15
  • Hmm, you're right, looks like propagation of the event is being stopped. Given your use case looks like [`beforeShow`](https://api.jqueryui.com/datepicker/#option-beforeShow) would work. I'll take a look later if I have the time. – msg May 30 '21 at 23:00

1 Answers1

0

The reason is; first time page is rendered, click event is registered for .myclass elements. However when those elements are destroyed, so are attached event listeners. Even after they appear again in a page, new events will not be automatically attached, because that event attaching code will not run again. There are two options;
1- Listen a parent element click event with .myclass selector:
HTML:

<div id="picker-area">
  <div id="datepicker"></div>
</div>

JS (for jQuery 1.3+):

$('#picker-area .myclass').live('click', function() {
  // this fn. will be attached to #picker-area with .myclass children selector. so even if new .myclass elements are appended, this function will continue to work.

  //destroy the old datepicker, etc.
});

JS (for jQuery 1.7+):

$('#picker-area').on('click', '.myclass', function() {
  // this fn. will be attached to #picker-area with .myclass children selector. so even if new .myclass elements are appended, this function will continue to work.

  //destroy the old datepicker, etc.
});

2- Reattach click event listener after creating a new .myclass element:

function reCreateDatePicker() {
  //destroy the old datepicker.
  $("#datepicker").datepicker("destroy");
   
  //do something probably async here.
  doSomething();
 
  //Recreate the same with some other options
  $("#datepicker").datepicker({
    showOn : "button", 
    //More options go here. But buttonText remains the same.
    buttonText: "<i id='really' class='myclass'>Show</i>",
    dateFormat: 'dd/mm/yy'});

  $(".myclass").click(function(){
    reCreateDatePicker();
  });
}

$(".myclass").click(function(){
  reCreateDatePicker();
});
tozlu
  • 4,667
  • 3
  • 30
  • 44